通过 CSS 有选择地调整图像大小

Question

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

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

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

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

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

Answer 1

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

但是您可以限制宽度和高度，这样 imgs 将在适合时采用其自然宽度和高度，否则它们将达到但不会超过视口大小。

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

Selectively resize images via CSS