Html 响应图像大小100%，但最大宽度

我已经创建了一个响应站点，图像设置为：

max-width: 100%;
height: auto;

这很好，可以为不同的屏幕设备和窗口缩放调整图像大小。然而，我的图像大小不一，相差5-30像素。有没有一种方法可以让它们都具有相同的高度和宽度，但也可以自动缩放

我尝试添加height=“170”和width=“190”，但这似乎不起作用

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

这里就是一个例子；

正如您在上面看到的，回答“朱利安国王”的图像稍大一些，因此，下一行将使用一个图像，而不是每行填充4个图像

---

谢谢

如果您想强制所有图像大小相同，只需设置一个通用CSS规则：

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

---

如果希望它们按比例缩放，请改用百分比：

img
{
    width: 100%;
}

---

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

您可以强制设置纵横比：

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

---

我认为你有两个选择：

使用CSS背景图像（见下文）或

将图像裁剪/调整大小至所有相同的高度和宽度

下面是一种使用背景图像的简便方法：（并非所有浏览器都支持）

.bgimg{
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}

除非您不介意它们的纵横比被关闭，否则您可能必须将它们制作成背景图像，或者使用CDN，可以像Cloudinary一样动态裁剪它们。使用宽度，而不是最大宽度？

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

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