html - 是否可以通过 CSS 中的比较大小来选择图像(或其他元素)

Question

是否可以根据某些尺寸标准选择图像或其他元素，例如，在 X 或 Y 维度上大于某些像素？

如何？

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

我的目标是为仅适用于超过特定阈值(例如 100 像素)的图像编写样式规则。比方说，这种风格对内容图像有意义，但对页面其他地方的小元素没有意义。样式表被应用到外部页面，我无法控制它们的内容并且通常不能重写或脚本处理它们:

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);
        }
   }
}

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