如何用CSS使图片大小一致？

Question

我希望我的 3 个图像具有相同的尺寸，但是宽度/高度样式没有帮助，因为当我为所有图像设置相同的尺寸时，所有 3 个图像都保持其纵横比，并且看起来很糟糕。

我得到了什么：

想要得到什么：

.social {
  display: flex;
}

.items_soc {
  height: auto;
  width: 50px;
  object-fit: cover;
  /* filter: brightness(0%) invert(100%); */
}

<div class="social">
  <img class="items_soc" src="https://via.placeholder.com/100x150" />
  <img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
  <img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>

Answer 1

当宽高比恒定时，对象拟合效果最佳。将代码更改为

.social {
  display: flex;
}

.items_soc {
  height: 50px;  /* Set the desired height */
  width: 50px;  /* Set the desired width */
  object-fit: cover;
  /* filter: brightness(0%) invert(100%); */
}

<div class="social">
  <img class="items_soc" src="https://via.placeholder.com/100x150" />
  <img class="items_soc" src="https://via.placeholder.com/150x150/aaa" />
  <img class="items_soc" src="https://via.placeholder.com/150x100" />
</div>

Answer 2

我明白你的问题是什么，如果你希望它们具有相同的高度和宽度，这将取决于你是否想要我将要说明的方法的垂直或水平顺序。

为此，您必须将每个图像包含在

<div>

元素中。完成此操作后，您可以使用 CSS 来声明其高度和宽度的细节。您可以在 div 开始标记中使用 style 属性。

style = "width : 100px; height: 100px;"

。它遵循相同的规则。

然后您可以插入图像及其来源。它们的长宽比应保持相同并适合 div。

<!DOCTYPE html>
<html>
<body>
<div style = "width: 1000px; height: 50px;">
<img class="items_soc" src="https://via.placeholder.com/100x150" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x100" style = "height: 50px; width: auto;"/>
</div>
</body>
</html>

这更多地适用于列表和名册，但您也可以尝试使用高度值并将宽度设置为自动。

<!DOCTYPE html>
<html>
<body>
<img class="items_soc" src="https://via.placeholder.com/100x150" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x150/aaa" style = "height: 50px; width: auto;"/>
<img class="items_soc" src="https://via.placeholder.com/150x100" style = "height: 50px; width: auto;"/>
</body>
</html>

相同的结果，不同的用例。

如何用CSS使图片大小一致？

问题描述投票：0回答：2

2个回答

最新问题

如何用CSS使图片大小一致？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2