Question

是否可以按某些尺寸标准选择图像或其他元素，例如，大于X或Y尺寸的某些像素？

如何？

我发现@media描述符允许比较运算符，但这些适用于整个显示区域。

我的目标是为图像编写一个样式规则，仅适用于某个阈值，例如100px。比方说，这种风格对内容图像有意义，但不适用于页面中其他地方的小项目。样式表正在应用于我无法控制其内容的外部页面，通常无法重写或脚本处理它们：

img {
    float: right;
    padding: 10px;
    margin: 20px;
    border: solid 1px #888;
    /* Grey */
    box-shadow: 6px 10px 8px rgba(0, 0, 0, 0.7);
    /* Sepia */
    box-shadow: 6px 10px 8px rgba(128, 128, 96, 0.7);
}

Answer 1

jQuery函数可以执行您想要的工作：

function check_image_width (image, length, type, className)
{
   if(type='greater') // then compare by the minimum width
   {
      if($(image).width() > length)
        {
          $(image).addClass(className);
        }
    }
    if(type='lesser') // then compare by the minimum width
   {
      if($(image).width() < length)
        {
          $(image).addClass(className);
        }
   }
}

我已经非常快速地完成了上述功能。它可能更加通用......

Answer 2

如果img具有宽度/高度属性和某些固定值（例如32px图标，60px gravatars，100px缩略图和“所有其他”），则可以使用属性选择器。

img{ /*"other" images*/}
img[width="100"]{ /*thumbnails rules*/}
img[width="60"]{ /*gravatars rules*/}
img[width="32"]{ /*icons rules*/}

如果您没有宽度/高度，您也可以使用URL来选择它们。也许你可以使用像“... / images / style / thumbnail / ...”这样的片段的网址，也可以使用：

img{ /*"other" images*/}
img[src*="images/style/thumbnail"] { /*thumbnail rules*/}
img[src*="www.gravatarsite.kom/images"] { /*gravatars rules*/}
img[src*="css/icons32"] { /*icons rules*/}

检查w3c attribute selectors，您还可以匹配开始/结束模式并合并它们。

是否可以通过CSS中的比较尺寸选择图像（或其他元素）

2 个答案: