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

Question

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:

If the images are properly cut you could just set the hight of those. — Jonas Grumann, Feb 06 '17 at 14:04

Pete · Accepted Answer · 2017-02-06T14:20:12.493

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>

I had to remove the width propriety but now works very well, thanks — Crashy, Feb 06 '17 at 14:34

score 0 · Answer 2 · answered Feb 06 '17 at 14:05

0

You can use the height property in CSS to define an elements height.

Try:

.img1 {
    float:left;
    width:30%;
    height:100px;
}

.img2 {
    float:right;
    width:60%;
    height:100px;
}

answered Feb 06 '17 at 14:05

Michał

868
1
10
36

This is true but setting width and height on an img might deform it, if it's not properly cropped in photoshop. – Jonas Grumann Feb 06 '17 at 14:07
Not neccecarily true - you can use the object-fit property on images to ensure proper cropping. Browser support varies. – Michał Feb 06 '17 at 14:17
Yup but browser support is bad for object-fit (especially ie and edge). – Jonas Grumann Feb 06 '17 at 14:27

score 0 · Answer 3 · answered Feb 06 '17 at 14:11

How about somthing like this:

https://jsfiddle.net/6n5oqamk/1/

using background-image css-element

CSS:

.img1 {
  float:left;
  width:30%;
  height: 750px;
  padding-right: 50px;
  background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg');
}

.img2 {
  float:right;
  width:60%;
  height: 750px;
  background-image: url('http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg'); 
}

HTML:

<div>
  <div class="img1"></div>
  <div class="img2"></div>
<div>

score 0 · Answer 4 · answered Feb 06 '17 at 14:11

Max-height means that the pictures won´t go over this height, but they also won´t use it if they don´t need it.

what you need is the normal height.

Your problem then might be that it will be cropped or deformed.

two possible ways:

object-fit:cover - not working for IE/Edge

or you switch to background-image making it

background-size:cover

score 0 · Answer 5 · answered Feb 06 '17 at 14:22

You should add the images as background:

jsfiddle: jsfiddle.net/s6gje0cd

.imgs-container {
  height: 500px;
}

.img1 {
  float: left;
  width: 30%;
  height: 100%;
  background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/esterno-agenzia.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.img2 {
  float: right;
  width: 60%;
  height: 100%;
  background-image: url("http://www.immobiliaredelcentromodena.com/wp-content/uploads/2017/02/interno-agenzia.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="imgs-container">
  <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>

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

5 Answers5

Linked