时间戳

首页 > 解决方案 > 图像的条件 CSS 样式取决于它们的*原始*宽度或高度

html - 图像的条件 CSS 样式取决于它们的*原始*宽度或高度

问题描述

如何为仅应用于具有一定数量的最小原始大小的图像的图像创建这样的 CSS 样式？

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

没有javascript。

标签： htmlimagecss

解决方案

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

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

推荐阅读