使用CSS

Question

为了使图像具有柔韧性，我可以使用以下CSS代码：

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

尽管如此，当浏览器使用完整尺寸时，这不能让我为图像定义特定尺寸。 有什么办法可以做这样的事情：

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

Answer 1

也许您想使用CSS Media Queries

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

@media (min-width: 1280px) {
    img {
        max-width: 100%;
        height: 150px;
        height: auto;
        width: auto\9;
    }
}

通过设置min-width和/或max-width，您可以将特殊规则仅应用于那些窗口大小。

Answer 2

您可以尝试使用CSS的视口高度和视口宽度单位来实现灵活的宽度和高度。 而不是使用'％'或'px'作为宽度和高度的单位，请尝试使用'vh'fir height和'vw'作为宽度。例如，一个50vh的高度大约是浏览器高度的50％，因此它在更改浏览器时非常灵活。

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

Answer 3

您已经尝试使用object-fit吗？

是固定图像大小的不错选择，只需通过：

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