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:

回答1:

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>

回答2:

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

回答3:

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>

回答4:

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

回答5:

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>

来源：https://stackoverflow.com/questions/42069614/two-image-on-the-same-row-and-with-the-same-height-css

标签

css

image