Question

我创建了一个自适应网站，图片设置为：

max-width: 100%;
height: auto;

这很棒，可以调整不同屏幕设备的图像大小和缩放窗口。然而，我的图像是不同大小约5-30px差异。有没有办法让它们具有相同的高度和宽度，但也可以自动缩放。

我尝试过添加身高=＆＃34; 170＆＃34;和宽度=＆＃34; 190＆＃34;但这似乎不起作用。

如何在不手动调整所有图像大小的情况下将它们设置为相同的大小。

示例在这里; http://www.cartoonquiz-answers.com/Solutions/Level8

正如您在上面可以看到答案的图像＆＃34; King Julien＆＃34;稍微大一点，结果是下一行有一个图像，而不是用4个图像填充每一行。

感谢

Answer 1

如果要强制所有图像的大小相同，只需设置一般CSS规则：

img
{
    width: 190px;
    height: 170px;
}

如果您希望缩放，请改用百分比：

img
{
    width: 100%;
}

这将强制所有图像填充其容器（并将保持其纵横比）。

Answer 2

您可以强制使用宽高比：

.reviewname:before {
    display: block;
    content: "";
    padding-top: 80%; /* aspect ratio */
}
.reviewname {
    position: relative;
}
.reviewname > img {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    left: 0px;
}

Answer 3

我认为你有两个选择：

使用CSS背景图片（见下文）或......
将图像裁剪/调整为相同的高度和宽度。

这是一种使用背景图片的便捷方式:( 并非所有浏览器都支持）

<img style="background-image: url('/path_to_your_images/yourimage.png');" class="bgimg">

.bgimg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

响应图像大小为100％但最大宽度

3 个答案: