Question

我正在尝试在网页中包含两个图像。一幅图像保持不变，另一幅图像将改变，并且将变为具有不同纵横比的图像。

我希望将要更改的图像的高度始终与第一个图像（不变的高度）相同。当我将图像更改为另一幅宽高比不同的图像时，这些图像不再具有相同的高度。

我尝试使用overflow:hidden，因为我认为它只会裁剪出图像的溢出区域。我考虑使用flex，但是随着长宽比的不断变化，我认为不合适。

这是我的HTML：

<html>
    <head></head>
    <body>
        <div>
            <img id="img1" src="https://cdn.silodrome.com/wp-content/uploads/2013/09/iPhone-5.jpg">
            <img id="img2" src="https://i.kinja-img.com/gawker-media/image/upload/s--6tZPLps6--/c_scale,f_auto,fl_progressive,q_80,w_800/trrsg0bnoouitdhsoe0s.jpg"
        </div>
    </body>
</html>

这是我的CSS：

html {
  margin:0px;
  padding:0pc;
}

div {
  float: left;
  width: 70%;
}

#img1 {
  width: 20%;
}

#img2 {
  width: 78.5%;
}

我创建了一个codepen来演示此问题。

我希望能够将img2更改为任何图像并且高度相同。我也希望它始终位于第二张图像的空间中心，但是我敢肯定这是我可以解决的。

Answer 1

您可以尝试一下。我给div的高度设置了固定的高度，并在＃img1和＃img2中添加了一些属性。希望对您有帮助。

<List<QueryMessages>>

html {
  margin:0px;
  padding:0pc;
}
div {
  float: left;
  width: 70%;
  height: 25vw;
}
#img1 {
  width: 20%;
  height: inherit;
  object-fit: cover;
  object-positon: center center;
}
#img2 {
  width: 78.5%;
  height: inherit;
  object-fit: cover;
  object-positon: center center;
}

Answer 2

只需将SetWinDelay的宽度和高度设置为固定值

<img>

Answer 3

您可以将CSS更改为此

#img1 {
  height: 400px; /* This value can be whatever */
}
#img2 {
  height: 400px; /* This value can be whatever */
}

这将保持图像的长宽比，并为它们两个应用固定的高度。建议使用像素而不是百分比。

图像更改时如何在HTML上保持图像大小相同

3 个答案: