Question

如何为这样的图像创建CSS样式，该样式将仅应用于最小原始尺寸为一定数量的图像？

例如，我希望所有原始宽度等于或大于500px的图像都具有某种CSS样式。但是其他人-不是，不应将CSS样式应用于他们。

没有javascript。

Answer 1

我想你是在问是否有一个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">

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

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

1 个答案: