CODEWITHSUNDEEP
cssimagelayoutposition
browsergarden
browsergarden

Reputation: 183

Position landscape and portrait images with same height

How can I make both landscape and portrait images maintain the same height next to each other in one div? I made a rough sketch here: showing the desired layout

And this is the code I tried:

HTML

<div class="image-wrapper">
  <div class="image">
    <img src="http://placekitten.com/400/600" />
    </div>
    <div class="image">
    <img src="http://placekitten.com/600/400" />
    </div>
</div>

CSS

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  max-height: 700px;
  background-color: yellow;
}

.image {
  background-color: red;
}

.image:first-of-type {
  margin-right: 1rem;
}

img {
  max-height: 100%;
  max-width: 100%;
}

Here's a fiddle: http://jsfiddle.net/8xaqjp6k/18/ Strange enough, my code, not the fiddle works just fine in Safari, but not in Chrome or Firefox

Upvotes: 1

Views: 3758

Answers (2)

d__c
d__c

Reputation: 26

The easiest thing to do would be to make use of max-height. Other things you do are 1, use background images, then set the height using padding: x% or set a container that wraps around your image(s) and then hides overflow.

You could use: 

.image img { max-height:285px }

Or use background images:

.image {
   height:0px;
   padding-bottom: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
 }

 <div class="image" style="background-image:url('/img/my-image.jpg')"></div>

Upvotes: 1

Max
Max

Reputation: 166

I'm honestly not sure if you want the whole picture to be equal height or just have the red box for both reach a height of 700px. Either way try changing your image-wrapper to:

.image-wrapper {
  width: 100%;
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: row;
  box-sizing: border-box;
  min-height: 700px;
  background-color: yellow;
}

Let me know if you need further help. Also, if it is just the image you want the same size not the red box, I suggest doing this through resizing the images, resizing images through css is not ideal and leads to performance issues.

Upvotes: 1

Related Questions