Matteo Matteo - 4 years ago 138
CSS Question

Two image on the same row and with the same height CSS

I have two images on the same row but I want these images have the same height also.

This is my code now:

HTML:

<div>
<div class="img1">
<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">
</div>
<div class="img2">
<img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">
</div>
<div>


CSS:

.img1 {
float:left;
width:30%;
}

.img2 {
float:right;
width:60%;
}


I tried to use the
max-height
property without a width but it doesn't work.

This is what I want:

enter image description here

Answer Source

It looks like your images will nicely resize with each other so you can easily achieve your layout with display:flex:

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.wrapper > div:first-child {
  margin-right: 15px;
}
.wrapper img {
  display: block;
  max-width: 100%;
}
<div class="wrapper">
  <div class="img1">
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg">
  </div>
  <div class="img2">
    <img src="http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg">
  </div>
  <div>

If you use the full page link in the snippet, you can see as the page resizes, the images resize.

If your images start off at different heights, then the best you can hope for is something like the following but as you will see there will be clipping and the image is not centered

.wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.wrapper div {
  overflow: hidden;
}
.wrapper img {
  display: block;
  width: auto;
  height: 100%;
}
<div class="wrapper">
  <div class="img1">
    <img src="http://lorempixel.com/200/600/sports/1/">
  </div>
  <div class="img2">
    <img src="http://lorempixel.com/800/400/sports/2/">
  </div>
  <div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download