css - 图像样式宽度依赖于 CSS

Question

我有一张图片的宽度为 90%，但最大宽度为 640 像素。我想在达到最大宽度时设置特定样式。所以，我在考虑根据宽度应用的样式。这里有一个类似的问题:

CSS targeting specific images

但是我没有宽度属性。我怎样才能做到这一点(如果可能，不使用 js)？

Answer 1

为了进一步说明 user3127242，您可以使用媒体查询在图像应更改的位置添加地标。为了有效地更改图像源，您还应该考虑使用 div与 background-image放。示例:

HTML:

<div id="fancy"></div>

CSS:

#fancy {
    background: transparent url(...) 0 0 no-repeat;
    width: 400px
}

@media only screen and (min-width:400px) {
    background-image: url(image1.jpg); 
}
@media only screen and (min-width: 500px) {
    background-image: url(image2.jpg);
}

示例 fiddle 在这里:http://jsfiddle.net/27UjQ/2/