CODEWITHSUNDEEP
htmlcssresponsive-design
simonelucidi87
simonelucidi87

Reputation: 291

Responsive images resizing

I'm trying to create a carousel of images inspired on the one in airbnb (https://www.airbnb.it/rooms/5382144?location=Roma%20Termini%2C%20Piazza%20dei%20Cinquecento%2C%20Roma%2C%20RM)

If you use the link above, you will notice the follows:

  1. If you change the WIDTH of your window, the image will resize accordingly
  2. If you change the HEIGHT of your window, the image will also resize accordingly
  3. All the images are resized based on the height of the smallest image. That means that if I have two images, one in landscape and one in portrait, the portrait image will resize to fit the height of the landscape image.

Now, I've been able to achive the number 1 and 2, but I'm struggling to achieve the number 3 using just CSS.

I did a jsfiddle to show you what I'm talking about https://jsfiddle.net/hvbvhc0q/5/

<div class="container">    
<div class="">
<div class="container-img">
 <img src="https://a0.muscache.com/im/pictures/67194098/f47fcd01_original.jpg?aki_policy=x_large" style="border: 2px solid blue">
  </div>

  <div class="container-img">
  <img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
  </div>
</div>
</div>

.container-img img {
   position: absolute;
   max-height: 100%;
   left: 0;
   right: 0;
   margin: 0 auto;
   max-width: 100%;
}

If you resize in width or height the preview box, you will notice that everything is perfectly responsive. But the problem is that the portrait image (red border) doesn't fit the landscape image (blu border). Said in other words: I want to keep the aspect ratio, but I want the portrait image to have the max-height equals to the height of the landscape (but of course without specifing any "fixed" height in px).

enter image description here

Can anyone help me? Thank you so much!

Upvotes: 1

Views: 1788

Answers (3)

simonelucidi87
simonelucidi87

Reputation: 291

Ok, I don't now why it works, but I did it!! :D

Here you can find the working fiddle: https://jsfiddle.net/g8t2o9ft/6/ This is the code and css:

<div class="container">    
  <div  class="container-inner">
  <div>
  <div>
  <img src="https://a0.muscache.com/im/pictures/67194046/877580d4_original.jpg?aki_policy=xx_large" style="border: 2px solid blue">
  </div>
  <div>
  <img src="https://a0.muscache.com/im/pictures/67194187/634b2de1_original.jpg?aki_policy=x_large" style="border: 2px solid red">
  </div>
  </div>
  </div>
  </div>

img {
position: absolute;
height: 100%;
left: 0;
right: 0;
margin: 0 auto;
max-width: 100%;
}

.container-inner {
position: relative;
padding-bottom: 65%;
}

.container {
max-width: 105vh;
}

As you can see, it's responsive for width (goal 1, easy), it's responive for height (goal 2, thanks to the rule max-width: 105vh) and the two images follow the same height keeping the same aspect ratio (goal 3).

Basically the trick that allows me to achieve the goal 3 is to apply these rules to the parent div:

.container-inner{
  position: relative;
  padding-bottom: 65%;
}

But I still don't really know why it works (I copied it from airbnb css)

Thank you so much to everyone who answered this question!

Upvotes: 1

Victor Borba
Victor Borba

Reputation: 21

I don't know what do you need, but, try this css code:

.container-img img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 100%;
    max-height: 500px; /*change for your necessity*/
}

But if you want to use a carousel component, I suggest for you that you research plugins js for this, like this link: https://github.com/yadhu/airbnb

Upvotes: 1

Die-Bugger
Die-Bugger

Reputation: 176

It seems you are using bootstrap (correct me if I am wrong). If so use class img-responsive for the img tag as below.

<img class="img-responsive" src="logo.png" alt="logo">

Upvotes: 0

Related Questions