css - 通过 CSS 选择性地调整图像大小

Question

在 Drupal 网站上工作，可以将不同大小的图像添加到任何单个节点。

我有以下 css 将图像调整为可管理的大小：

img {
    width: 100%;
    height: auto;
}

但这显然适用于所有图像，无论它们的宽度或高度如何。

有没有办法应用媒体查询或其他策略来过滤特定宽度或高度的图像并将上面的样式应用于它们？

标签： cssimageimage-resizing

Answer 1

听起来好像您想限制 img 的大小，无论媒体、视口、尺寸如何，所以我认为媒体查询不会对您有所帮助。

但是您可以限制宽度和高度，因此如果它们适合，imgs 将采用它们的自然宽度和高度，否则它们将上升到但不超过视口大小。

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