Resize height to 100%, center image horizontally. Option 2: Width is 100%, Height is too short. Option 1: Width is 100%, Height still covers the height (pic 2), so we just center the image vertically (pic 3). Otherwise, we’ll need to change the height and width of the image as well as center it. If the height is larger than the height of our holder Div, we’ll only need to center the image. So we’ve already set the width to 100% in the CSS. Also, I don’t just want to hide the overflowing image – I also want to center the image in the holder Div. In our example, we want the image to be resized to fully fill both the height and the width, while getting as much of the image as possible showing. Note the height:auto above this automatically resizes the height so that the dimensions of the image stay accurate. I’ll also set the width of the image to 100% of the holder Div, so that the resulting image will be on the far right (note the image still is a little too tall, but our overflow:hidden takes care of that). The image itself extends outside of the Div, but with my CSS, I’ll be making all the overflow hidden.īut CSS can help me out a little more. I usually take a Div holder approach, with the width pre-set in CSS.įor example, the image below shows the border (in blue) of my holder Div. We will be using jQuery, of course, but CSS will be in a supporting role. But the solution below has been the most effective (and easy) one for me to use.

Since this is a fairly common problem, there are many other ways of solving the issue. But if the image could be either, you come across an awkward problem of making changes to the size of the image AFTER it loads. If all the images will be vertical, you can do this just with CSS same for all horizontal images.

At some point, every web developer comes across the need to fit an image of unknown size into a space on the site they’re building.

Jquery on resize or onload