Geek Answers Handbook

Image for maximum width: 100%, height: auto, but height not less than XX without crossing

There is an image in the container. The image occupies 100% of its width and height. But I want to set the height to at least XXX pixels, so when I change the size of the container, no matter what, the image remains at least a certain height and width in order to maintain proportions. The problem with my current approach below is that the image sizes are distorted after resizing the container.

<div class="imageHelper"> <img src="http://farm8.staticflickr.com/7230/7218149614_e0ba252f73_b.jpg" alt="image" /> </div> .imageHelper { position: relative; width: 100%; height: 600px; overflow: hidden; } .imageHelper img { position: absolute; top: 50%; left: 50%; width: 100%; max-width: 100%; width:auto\9; height: auto; min-height: 600px; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

I have a Fiddle setting ( http://jsfiddle.net/5JY8c/1/ ) that you can try changing and checking why the current approach is not working.

+6
source share
3 answers

This article may help in general:

http://www.creativebloq.com/css3/control-image-aspect-ratios-css3-2122968

And this part in particular:

 object-fit: cover; overflow: hidden;

Works with CSS3.

UPD: As Mark suggested, this approach only works in modern browsers: http://caniuse.com/object-fit

+8
source

That's what you need?

 .imageHelper img { position: absolute; top: 0%; left: 0%; max-width: 100%; max-height: 100%; }

See an example here.

You can change the height and width of the container .. and the image will always remain proportional.

+3
source

you can try setting the relays to line-height and text-align to center the image. Then, using negative margin, you can practically reduce the size of the image, at least the space that is required for the image.

if you want the image to be width: 100% and min-height: 600 pixels, it is not coherent, and you need to cut something so that it preserves its ratio, but with some parts hidden. Vertical or horizontal.

This is the case if your image is part of your content, otherwise , if it is just decoration , you should do background-image -position and -size . An example of cutting off one image in a stream from its center: http://codepen.io/gc-nomade/full/fdIxe

 .imageHelper { height: 600px; line-height: 600px;/*set baseline right in vertical middle */ overflow: hidden; text-align:center;/* center image or texte */ } .imageHelper img { margin: -100%;/* reduce virtually to 0 space used by image so it follows from center, line-height and text-align set in parent :) */ vertical-align:middle;/* stands on baseline */ /* keep both height/width flexible */ min-height:600px; min-width:100%; }

since it uses basic CSS, you need to increase compatibility with the old browser :)

+1
source

More articles:


All Articles