I want resize an element by percentage only after a certain window size

This site is best viewed in a modern browser with JavaScript enabled.

I want resize an element by percentage only after a certain window size

American_horizo

Hi
I've an html with a fluid layout. I placed and image on the left and i want that it assumes 600px of width in case the browser window size is more than 980px. Below this size i want that the image is scaled in percentage. For do that is necessary use javascript and modify dinamically the css property?

tracknut

600px is approx 61% of 980px, so assuming the parent of the image is the full browser width, you could do:

img {width:61%;max-width:600px}

Dave

American_horizo

i've done some proof but mine is a particoular case and your solution cause some overlaps.
I've no problem to use JS, could i use it or for performance question is better use only css ?

tracknut

I suppose you can use JS. It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

Dave

rtrethewey

It's easy to do this in your stylesheet with a media query:


#myImg { width:600px; }

@media screen and (max-width:600px) {
#myImg { width:70%; }
}

American_horizo

tracknut;1270395 wrote:
I suppose you can use JS. It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

Dave

There are so many browser that don't use JS? (really i asking, i dont know) Even facebook use JS, and anyway my site use JS for many other things such ajax requests... If JS in poorely supporte, so, i failed to project it

gaurav_insight

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Proportional resizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 40%;
  height: 30%;
  background-color: #ddd;
}

</style>
</head>
<body>
<div>divthing</div>
</body>
</html>

Kishor Makwana
Software Engineer
Insight Softech
www.insightsoftech.com

rtrethewey

I made a mistake in my earlier post and apparently didn't include enough code for the idea to be clear. Try:

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="charset" content="utf-8">
<title>Responsive Image Size</title>
<style>
#myImg { width:600px; }

@media screen and (max-width:980px) {
#myImg { width:61%; }
}
</style>
</head>
<body>
<img id="myImg" src="someImage.jpg">
</body>
</html>

600/980 = .612, which is why I chose the 61%. It should give good results.

tracknut

American horizo;1270425 wrote:
There are so many browser that don't use JS? (really i asking, i dont know) Even facebook use JS, and anyway my site use JS for many other things such ajax requests... If JS in poorely supporte, so, i failed to project it

Personally, I try to make my sites "work" without JS, and have JS make them "even better". But if you've already passed that point with your existing JS, then of course there isn't much need to change now for this one thing.

Dave

American_horizo

however facebook and other important sites requires js else dont work

Alex_Thompson

I think this would be It would be slower, but negligible. I'd worry more about what happens if someone doesn't have JS in their browser. But if you want to use JS, go right ahead.

danny_rough

you can try some imaging sdk which is ubiquitous on the internet to resize image.

priyankagound

The below example is just to set the height and width of <html> and <body> to 100%, overflow to hidden and use percentages for left, top, width and height of elements:

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Proportional resizing</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

div {
  position: absolute;
  left: 30%;
  top: 20%;
  width: 40%;
  height: 30%;
  background-color: #ddd;
}

</style>
</head>
<body>
<div>divthing</div>
</body>
</html>

Hope this helps you