CODEWITHSUNDEEP
javascriptjqueryhtml
John
John

Reputation: 1338

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

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 });
}

Upvotes: 0

Views: 299

Answers (4)

donnie
donnie

Reputation: 66

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>

Upvotes: 1

Malk
Malk

Reputation: 11983

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>

Upvotes: 1

yelsayed
yelsayed

Reputation: 5532

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.

Upvotes: 0

Gabriel
Gabriel

Reputation: 2190

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.

Upvotes: 0

Related Questions