whay can't I change both image height and width at same time with javascript?

Question

I have an image in a div and I want the image to stay centered at all times.

If the width of the image is wider than the screen, then I want the image to expand to the width of the view port. And if the image is shorter than the height of the view port then I want it to expand to the height of the view port.

In my code, when I expand the width, the height expands automatically, which is great since I don't have to calculate it. The height does the same thing. When the height is expanded, the width stays proportional.

However, if the width changes in such a way that the height is now smaller than then view port, then I need to check the height and bring it back up to the view port height (which should expand the width again but it doesn't). When I have to change both height and width at the same time, the automatic proportioning doesn't work. If I do one or the other, it does work.

How can I accomplish this so they can both be changed and work without distorting the image?

my code:

inner_width =  $(window).innerWidth();
inner_height =  $(window).innerHeight();


if (inner_width < original_pic_width ) {
   $(pic).css({'width': original_pic_width});
}   
else {
   $(pic).css({'width' : inner_width });
}

if (inner_height < original_pic_height){
   $(pic).css({'height': original_pic_height});
}
else {
   $(pic).css({'height' : inner_height });
}

Please read our How to Ask page for hints on how to improve your question. Great question tend to provide quicker, better answers from the community - consider adding a minimal reproducible example for us to troubleshoot the issue — blurfus
– blurfus, Commented May 6, 2016 at 23:27

Malk · Accepted Answer · 2016-05-06 23:31:21Z

1

CSS contain is pretty nice.

$("div").css({
  backgroundImage: "url(" + $("img").prop('src') + ")",
  backgroundSize:"contain",
  backgroundRepeat: "no-repeat"
});

div { width:200px; height:200px; border:1px solid red;}
div img { display:none }

<div>
  <img src="http://www.somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg"/>
</div>


<script src="https://code.jquery.com/jquery-2.2.3.min.js"   
        integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" 
        crossorigin="anonymous"></script>

answered May 6, 2016 at 23:31

Malk

12k4 gold badges35 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Over a year ago

I tried this, and originally the image was not a background image but rather just an image in the dive. Setting it to a background image now it doesn't fill the whole div.

donnie · Accepted Answer · 2016-05-07 01:22:27Z

Here is a possible solution (not sure to understand clearly what you want though). Note that I'm not absolutely sure that the centering method is cross-browser.

var div = $("div");
var img = $("img");
var imgw = img.width();
var imgh = img.height();
var imgr = imgw / imgh;
var sizes = [300, 120];
var i = 0;

setInterval(function () {
  div.width(sizes[i]);
  i = (i + 1) % 2;
  adjust();
}, 1000);

function adjust () {
  var divw = div.width();
  var divh = div.height();
  var divr = divw / divh;
  if (divr < imgr) {
    img.width("100%");
    img.height("auto");
  } else {
    img.width("auto");
    img.height("100%");
  }
}

div {
  position: relative;
}

img {
  display: block;
  position: absolute;
  top: 0; bottom: 0;
  right: 0; left: 0;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:120px;height:120px;border:10px solid #5900CC;">
  <img style="width:100%;" src="https://i.sstatic.net/jKXi2.jpg" />
</div>

Gabriel · Accepted Answer · 2016-05-06 23:28:58Z

0

If you set both height and width... both dimensions, height and width will be set.

It should be enough to set just one dimension if you set the width=viewport's width if it's horizontal (width>height) or the height=viewport's height if it's vertical.

answered May 6, 2016 at 23:28

Gabriel

2,1801 gold badge17 silver badges20 bronze badges

Comments

yelsayed · Accepted Answer · 2016-05-06 23:31:18Z

0

Find which dimension you have to change and change that one only. You can do that by checking the difference between the image's width and the window's innderWidth, and the difference between the image's height and the window's innerHeight. Whichever difference is greater is the one you need to change only. That should take care of the other dimension without having to resize both.

answered May 6, 2016 at 23:31

yelsayed

5,5926 gold badges35 silver badges39 bronze badges

1 Comment

John Over a year ago

I tried that but when I resize one, the other does not respond to the change that I set it to.

Collectives™ on Stack Overflow

whay can't I change both image height and width at same time with javascript?

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related