无需硬编码即可使两个图像具有相同的高度？

Question

这里我有两张图片。这两个 img 元素的宽度完全符合我的要求。这两个元素及其容器之间的排水沟也正是我想要的。

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

我想知道是否有办法让这两个图像具有相同的高度，而无需将它们切换为背景图像。此外，如果此图像供稿是 'dynamic' 我如何在不知道相关图像的纵横比的情况下明确定义高度？

Answer 1

我建议使用纵横比。在上传之前，将您的图片格式化为至少相同的纵横比。如果您不能预格式化，另一个选项是转换为 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 2

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

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

Answer 3

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

你可以很容易地解决这个问题，只要图像的大小相对相似。这个想法是，你用 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 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>

无需硬编码即可使两个图像具有相同的高度？

Make two images same height without hardcoding?

html

javascript

css

height

image