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

问题描述

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

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

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

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

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

解决方法

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

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

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