Question

我想添加一种我博客的图像样式，但是，如果我只是使用CSS，那么样式将应用于所有图像。问题是这种风格的小图像（<500px宽）看起来很糟糕。

是否有任何可用的方法（可能是条件CSS）来归档我想要的东西。

Answer 1

Afaik没有纯粹的CSS方法可以做到这一点，但使用JavaScript（和jQuery）很容易：

$("img").each(function() {
  if ($(this).width() > 500)
    $(this).addClass("large-img");
});

然后

.large-img {
  /* special styles here */
  ...
}

Answer 2

在将CSS样式应用于元素子集时，最常用的方法是使用CSS Classes。这些使您能够向浏览器指示您希望将特定样式应用于某些元素。

img.my-style {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

<html>
  <body>
    <img src="/images/small.png">
    <img class="my-style" src="/images/large.png">
  </body>
</html>

当然，这要求您能够编辑网站的HTML，但情况并非总是如此。在无法修改HTML的情况下，您可以使用其他CSS选择器来标识要应用样式的元素。

例如，如果您的大图片仅显示在您网站的某个部分内，那么您可以将您的风格应用于该部分内的图片：

#content>img {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

<html>
  <body>
    <img src="/images/small.png">
    <div id="content">
      <img src="/images/large.png">
    </div>
  </body>
</html>

您也可以使用width=""属性的值来选择图像，但这可能很麻烦且很脆弱，所以我建议尽可能避免使用它。

img[width=700] {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

<html>
  <body>
    <img src="/images/small.png" width="150">
    <img src="/images/large.png" width="700">
  </body>
</html>

不幸的是，据我所知，CSS规则不可能考虑到图像元素的动态大小，因此您需要选择最适合您用例的选项。我已经用“最佳”选项（在我看来）首先订购了它们，在我看来最糟糕的选择（在我看来）。