html - 图像的条件CSS样式取决于图像的“原始”宽度或高度

我怎样才能为图片创建这样一个CSS样式，它将只应用于具有一定数量的最小原始大小的图片？
例如，我希望所有原始宽度等于或大于500px的图像都具有特定的css样式。但其他人-不，这种CSS样式不应该应用到他们身上。
没有javascript。

最佳答案

我想你是在问是否有一个CSS选择器可以根据保存的尺寸而不是显示的尺寸来定位图像，即忽略缩放。
不幸的是，CSS中还没有任何东西可以查询这样的属性。
一种解决方案可能是将大图像命名为不同于小图像的名称，这样您就可以使用[data-value] selector。在这个例子中，我基于图像路径中的维度进行了匹配，但是也许您可以在路径中使用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">

你能解释一下为什么你想用不同的方式来表现大图像，这样我就可以提供一个更好的答案了吗？

关于html - 图像的条件CSS样式取决于图像的“原始”宽度或高度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53434636/