图像的条件 CSS 样式取决于其*原始*宽度或高度

Question

如何为图像创建这样的 CSS 样式，使其仅应用于具有一定量的最小原始尺寸的图像？

\n\n

例如，我想要所有具有原始宽度的图像等于或大于 500px 的图像都具有某种 css 样式。但其他 - 不，CSS 样式不应该\xe2\x80\x99 应用于它们。

\n\n

没有 JavaScript。

\n

Answer 1

我想您是在问是否有一个 CSS 选择器可以根据保存的尺寸而不是显示的尺寸来定位图像，即忽略缩放。

不幸的是，CSS 中还没有任何内容可以查询此类属性。

一种解决方案可能是以与小图像不同的方式命名大图像，这样您就可以使用[data-value] 选择器。在此示例中，我根据图像路径中的维度进行匹配，但也许您可以使用large路径中的某个维度？

img {
  max-height: 200px;
  border: 5px solid black;
}


/* Target images with /640/ in the src path.*/

img[src*="/640/"] {
  border-color: red;
}

<img src="https://placeimg.com/640/510/any" alt="Image 1">
<img src="https://placeimg.com/440/480/any" alt="Image 2">
<img src="https://placeimg.com/640/680/any" alt="Image 3">
<img src="https://placeimg.com/440/420/any" alt="Image 4">

您能否详细说明为什么您希望以不同的方式表示大图像，以便我可以提供更好的答案？