CODEWITHSUNDEEP
csshtmlresponsive-designtwitter-bootstrap-3
Benjamin Schulte
Benjamin Schulte

Reputation: 873

CSS Responsive Images either max-width or max-height

I'm currently working on my very first responsive webdesign working with Bootstrap 3.

What I now have is a full-width grid of user profile images. These images have a parent container which must be fully filled by the image. The parent container must have a fixed height because of the requested layout.

The problem is: Using CSS I only know how to fit either the width or the height, not depending on the size of the container.

You can see the problem in this jsfiddle: http://jsfiddle.net/usD2d/

li /* container */ {
    display: block;
    overflow: hidden;
    float: left;
    width: 25%;
    height: 100px; /* something fixed */
}
li img {
    width: 100%;
    min-height: 100%; /* destroys aspect ratio */
}

If you have a large screen, the images will fit perfectly. Having smaller devices the images will lose their aspect ratio.

Surely I could use @media(min-width) and change the img from width to height, but due to using BootStrap and having a very dynamic layout (collapsing sidebar, etc) this could become very tricky.

Is there any CSS only solution? If not, is there a great jQuery solution maybe also providing a focus point where to keep the focus on when cropping?

Thank you very much in advance!

Upvotes: 3

Views: 17649

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106078

If you want to fill entire space with image clipping it, ratio will be preserved but image will be partially hidden. vertical-align and negative margin can be used.

example: http://jsfiddle.net/usD2d/2/ keeping center image in center(like would a background-position: center center ;. 

ul {
    width: 100%;
}
li {
    display: block;
    float: left;
    width: 24%;
    height: 150px;
    overflow: hidden;
    border: 1px solid black;
    text-align:center;/* set image in center */
    line-height:150px;/* set image or text right in middle;*/
}
img {
    min-width: 100%;
    vertical-align:middle;/* okay see it in middle , but you can tune this */
    margin:-50% -100%; /* okay, you can tune margin to crop/clip other area */
}

the negative margin reduce virtually size of image wich will center(text-align ) and sit on baseline set by line-height.

This a CSS cropping.

Upvotes: 4

halon1301
halon1301

Reputation: 66

I think that you want the image to determine the width of the <li>. I removed the width: 25%; property, and your images kept their aspect ratio in your fiddle. So change

li /* container */ {
display: block;
overflow: hidden;
float: left;
width: 25%;
height: 100px; /* something fixed */
}

to

li /* container */ {
display: block;
overflow: hidden;
float: left;
height: 100px; /* something fixed */
}

Upvotes: 0

Related Questions