使用CSS调整图像大小以适合正方形

Question

我有一组图像，我正在调整到设定的宽度，并允许自动设置高度。所有图像都是方形的，或者比它们更高更宽，我想要的是一个＆＃34;信箱/宽屏＆＃34;对非方形图像的影响。有没有办法让图像使用CSS在方形边框内垂直居中？

编辑添加非常粗略和准备好的布局。我也喜欢要包装的图像，这样如果屏幕放大，那么一行中可能只有两个。

Answer 1

在所有图片上尝试vertical-align:middle;。

Answer 2

如果您可以控制实际图像，这意味着您自己拥有它们，那么IMO的最佳解决方案就是将它们裁剪为完全正方形。因此，如果这些图像是100px X 100px，您可以添加一些padding:10px以在边缘和CSS边框之间留出一些间距，例如：

div .image {
    background-image: url("images/blah.jpg");
    background-repeat: no-repeat;
    background-color: black;
    border: 3px solid black;
    padding: 10px;
}

我认为这将完全符合您的要求。 ：）

注意：如果您自己没有图像，我会使用CSS属性：max-height或max-width。这将使图像至少保持成比例。不要同时使用这两种方法。

Answer 3

您可以在容器background-image中使用<img>代替<div>，并将CSS设置为

background:url("img_url") no-repeat ;
background-size:100% auto;
background-position:center center;
background-color:black;

这将为风景图像提供宽屏效果

希望这有帮助！