CODEWITHSUNDEEP
cssimage
Crashy
Crashy

Reputation: 345

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

Upvotes: 2

Views: 8475

Answers (5)

pol
pol

Reputation: 2701

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>

Upvotes: 0

Pete
Pete

Reputation: 58452

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>

Upvotes: 1

Marcel Schmid
Marcel Schmid

Reputation: 424

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

Upvotes: 0

R. P&#252;lsinger
R. P&#252;lsinger

Reputation: 165

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>

Upvotes: 0

Michał
Michał

Reputation: 908

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;
}

Upvotes: 0

Related Questions