使两个图像高度相同而无需硬编码？

Question

这里有两张图片。我有这两个 img 元素的宽度，这正是我想要的。这两个元素和它们的容器之间的排水沟也正是我想要的。

应用vertical-align: top 后，我注意到这两个图像都会根据源图像的纵横比自动确定自己的高度。正如您所看到的，这意味着图像最终具有相同的宽度（我明确定义）但高度不同，大约有十几个像素：

我想知道是否有一种方法可以使这两个图像具有相同的高度，而无需将它们切换为背景图像。此外，如果此图像馈送是“动态”的，我如何在不知道相关图像纵横比的情况下明确定义高度？

Answer 1

所以问题是，如果你在两张不同尺寸的图片上设置相同的宽度和高度，至少其中一张会失真。

只要图像大小相对相似，您就可以很容易地解决此问题。这个想法是，你用一个 div 包围图像，并给 div 高度和宽度而不是图像。然后给它 CSS overflow: hidden; 它会裁剪掉图像的多余部分。您可能还需要给它display: inline-block; 以使 div 彼此相邻。

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  overflow: hidden;
}

<div>
  <img src="http://via.placeholder.com/200x200">
</div>
<div>
  <img src="http://via.placeholder.com/200x240">
</div>

或者如果您希望图像垂直居中：

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  overflow: hidden;
  position: relative;
}
img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

<div>
  <img src="http://via.placeholder.com/200x200">
</div>
<div>
  <img src="http://via.placeholder.com/200x240">
</div>

Answer 2

我建议使用纵横比。在上传之前，至少将图像格式化为相同的纵横比。如果您无法预先格式化，另一种选择是转换为 BG 图像。

.container {
    padding-top: 100%; /* 1:1 Aspect Ratio */
    //padding-top: 75%; /* 4:3 Aspect Ratio */
    //padding-top: 66.66%; /* 3:2 Aspect Ratio */
}

Answer 3

我认为另一种方法是设置图像高度并使用实际图像内容作为背景图像，背景大小：包含；这样你的图像就不会被扭曲，并且总是会填满大小。

<img src="blank.gif" style="background-image:url(myImage.jpg);background-repeat:no-repeat;background-position:center center; background-size:contain;height:300px;">

Answer 4

如果我是你，我会使用 CSS 方法将图像包装在一个容器中，该容器将 overflow 设置为 hidden，这将隐藏悬挂的像素。

如果您觉得人们会错过图像的一部分，您可以使用 CSS 动画，就像我在下面所做的那样，将鼠标悬停在它上面。我使用 translate3d 是因为它在浏览器中利用 GPU 加速。

main {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
width: 500px;
}

.img-wrap {
overflow:hidden;
height: 15rem;
width: 15rem;
}

.img-wrap>img {
max-width: 500px;
}

.img-wrap:hover>img {
animation: pan 5s;
}

@keyframes pan {
  from {transform:translate3d(0,0,0);}
  to {transform:translate3d(-100px,0,0);}
}

<main>
<div class="img-wrap">
<img src="http://lorempixel.com/city/500/600">
</div>
<div class="img-wrap">
<img src="http://lorempixel.com/people/800/700">
</div>
</main>

Answer 5

实现这一点的最简单方法是将图像设置为 div 的背景。这不会像在 img 元素上设置高度和宽度那样扭曲图像。然后，您可以定义是否居中。

.img {
  width: 200px;
  height: 100px;
  display: inline-block;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

<div class="img" style="background-image: url('https://images.pexels.com/photos/23764/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');"></div>
<div class="img" style="background-image: url('https://images.pexels.com/photos/23388/pexels-photo.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');">
</div>

Answer 6

我一直有这个问题，我发现唯一能有效解决这个问题的方法是

background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;

并通过后端显示图像，例如带有内联样式的 php

<div class="image" style="background-image: url('pathToImage');"></div>