Question

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

应用open System.Windows let window = new Window() let settings = UserSettings.Load() window.Top <- settings.WindowTop window.Left <- settings.WindowLeft window.Height <- settings.WindowHeight window.Width <- settings.WindowWidth window.Closing.Add( fun _ -> { WindowTop = window.Top WindowLeft = window.Left WindowHeight = window.Height WindowWidth = window.Width }.Save() )后，我注意到这两个图像都会根据源图像的纵横比自动确定自己的高度。正如你所看到的，这意味着图像最终具有相同的宽度（我明确定义）但不同的高度大约十几个像素左右：

我想知道是否有办法让这两个图像都具有相同的高度而不将它们切换为背景图像。此外，如果此图片Feed是动态的＆＃39;如何在不知道相关图像的纵横比的情况下明确定义高度？

Answer 1

所以问题是如果你在两个不同大小的图像上设置相同的宽度和高度，至少其中一个会被扭曲。

只要图像的大小相对相似，您就可以轻松解决此问题。这个想法是，你用div包围图像，并给div高度和宽度而不是图像。然后给它CSS overflow: hidden;，它将裁掉图像的额外位。您可能还需要给它display: inline-block;以使div彼此相邻。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为另一种方法是设置图像高度并使用实际图像内容作为背景图像：background-contains;这样你的图像就不会扭曲，并且总是会填充尺寸。

<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

如果我是你，我会利用CSS方法将图像包装在overflow设置为hidden的容器中，这将隐藏掉像素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

实现这一目标的最简单方法是将图像设置为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 5

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

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

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

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

在没有硬编码的情况下使两个图像高度相同？

5 个答案: