CODEWITHSUNDEEP
jqueryhtmlcss
WPasman
WPasman

Reputation: 25

2 Images in 1 row; setting 1 image as parent in height for the other image

I have tried a few answers on Stackoverflow and so far all don't seem to work or I don't get it work. So if you have the answer to my question below or if you can point me to a correct answer on the website I would appreciate.

I'm having the following issue:

Setup:

But, of course the images will be differently in height. What I would like is:

- Portrait image: The portrait image should always be displayed 100% in width and height (within the space given, in my case 28% in width).

- Landscape image: The height of the landscape image should be the same height as the portrait image, also when the image itself is bigger. Basically the portrait div is sort of the parent of the landscape div and sets the height for the entire row. The landscape image will be masked out if a part of the image itself is bigger in height than the portrait image.

Here is a Fiddle with my setup: https://jsfiddle.net/7bsjg7dq/

<div class="wrap">

<div class="item1"><img src="http://www.wouterpasman.com/test/tree-portrait.jpg"></div>
<div class="item2"><img src="http://www.wouterpasman.com/test/tree-landscape.jpg"></div>

</div>

So in my Fiddle example the landscape picture extends beyond the height of the portrait image. This should not be the case. The height of the landscape image should be the same as the portrait image and the rest which is overflowing on the right and bottom will be masked out. In the end the best scenario will be if the landscape image is masked out and centered inside the div as well.

Thanks in advance!

Upvotes: 0

Views: 114

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106048

If image ratio are always the same, you may take a look at display:table + table-layout:fixed, sizing the container and only one of the cell.

img {
  width: 100%;
  display: block;
}
.wrap {
  display: table;
  width: 100%;
  table-layout: fixed;
  background: red;
}
.item1,
.item2 {
  display: table-cell;
}
.item2 {
  width: 67.2%;
}
.item1 {
  padding-right: 2%;
}
<div class="wrap">
  <div class="item1">
    <img src="http://www.wouterpasman.com/test/tree-portrait.jpg">
  </div>
  <div class="item2">
    <img src="http://www.wouterpasman.com/test/tree-landscape.jpg">
  </div>

</div>

https://jsfiddle.net/7bsjg7dq/2/ or https://jsfiddle.net/7bsjg7dq/3/ width instead max-width

You may also dispatch width to images https://jsfiddle.net/7bsjg7dq/4 still if ratio of each images is the same

Upvotes: 1

Related Questions