CODEWITHSUNDEEP
jqueryhtmlcss
Baldráni
Baldráni

Reputation: 5638

Responsive Image of same height keeping their Ratio

I'm facing a problem that seems to be unresolved unless I just have not found the answer (It was not in the "Questions that may already have your answer" neither did I found it accros the Web).

So Here is my problem : I have multiple image never the same height/width but I want them to be displayed with the same aspect and keeping their ratio. Concretely what I'm trying to respect is :

Like this but in responsive : Example

Here is a Fiddle of what I have found for now on : my excavation

CSS :

This is for keeping the same ratio.

height: 50%;
width: auto;

And this is to ajust to the size I want (But this is not responsive !)

   position: relative ;
    float: left;
    height:200px;
    width:200px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

I'm open to every solution; jQuery as well.

Upvotes: 1

Views: 1044

Answers (2)

Ahs N
Ahs N

Reputation: 8386

Bootstrap has been adding CSS to your ".container" element. This is what I got by overwriting some of the elements in your code:

.container {
    border: 1px solid black;
    height: 81pt;
    overflow: hidden;
    padding:0px;
}
.productImage {
    max-width: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}
img {
    vertical-align: baseline;
}

Here is your updated code on JSFiddle

Upvotes: 0

Jackson
Jackson

Reputation: 3518

This is an issue which often happens in frontend development. Ideally we should use images which have the exact same size so that the aspect ratios remain the same.

When the images have verying heights then we need to crop the images somehow so that they have the same height.

Here is an jsFiddle example of what you can do.

.image-wrap {
   overflow: hidden;
   height: 0;
   padding-bottom: 50%;
}
.image-wrap img {
   max-width: 100%;
}

Wrap the image in a div with overflow: hidden and use padding bottom to define the height of the image.

Upvotes: 6

Related Questions