同一行上的两个图像具有相同的高度 CSS答案

【问题标题】：Two image on the same row and with the same height CSS同一行上的两个图像具有相同的高度 CSS
【发布时间】：2017-02-06 22:22:31
【问题描述】：

我在同一行上有两张图片，但我希望这些图片也具有相同的高度。

这是我现在的代码：

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

我尝试使用没有宽度的max-height 属性，但它不起作用。

这就是我想要的：

【问题讨论】：

如果图像被正确剪切，您可以设置它们的高度。

标签： css image

【解决方案1】：

看起来您的图像可以很好地相互调整大小，因此您可以使用 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>

如果你在sn-p中使用整页链接，你可以看到页面调整大小，图像调整大小。

如果您的图像从不同的高度开始，那么您可以期望的最佳结果如下所示，但正如您将看到的那样，将会出现剪辑并且图像未居中

.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】：

您可以在 CSS 中使用height property 来定义元素高度。

试试：

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

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

【讨论】：

这是真的，但是如果在 Photoshop 中没有正确裁剪，在 img 上设置宽度和高度可能会使其变形。
不一定正确 - 您可以在图像上使用 object-fit 属性来确保正确裁剪。浏览器支持各不相同。
是的，但是浏览器支持不利于对象匹配（尤其是 ie 和边缘）。

【解决方案3】：

这样的事情怎么样：

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

使用背景图片 css 元素

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】：

最大高度意味着图片不会超过这个高度，但如果他们不需要它也不会使用它。

您需要的是正常高度。

那么你的问题可能是它会被裁剪或变形。

两种可能的方式：

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

或者你切换到背景图像制作它

background-size:cover

【讨论】：

【解决方案5】：

您应该将图像添加为背景：

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>

【讨论】：