Html 使用CSS使用浏览器大小自动调整图像（具有预定义大小）的大小

为了使图像具有灵活性，我可以使用以下css代码：

img {
    max-width: 100%;
    height: auto;
    width: auto\9;
}

尽管如此，当浏览器处于全尺寸时，这不允许我为图像定义特定尺寸。 有没有办法做到这一点：

img {
    max-width: 100%;
    height: 150px;
    height: auto;
    width: auto\9;
}

也许你想用

---

通过设置

min width

和/或

max width

，您可以仅对那些窗口大小应用特殊规则。

您试图实现的灵活宽度和高度可以使用css的视口高度和视口宽度单位来实现。 不要使用“%”或“px”作为宽度和高度的单位，请尝试使用“vh”fir height和“vw”作为宽度单位。例如，50vh高度约为浏览器高度的50%，因此在浏览器更改时具有高度灵活性

img { max-width: 100%; max-height: 150px; height: 70vh; width: 60vw; }

---

您是否已尝试使用

对象拟合

是固定图像大小的好选择，只需传递：

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

---

可能

最大高度：150px

？

img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}