javascript - CSS3/HTML5 响应图像

Question

我想根据网页大小使用不同大小的图像。 例如，我的图像有两种不同的尺寸:

<img src="images/img1.jpg" data-big="images/img1.jpg" data-small="images/img1small.jpg" alt=""></img>

data-small 图像的宽度为 100px。

@media (max-width:600px) {
    img[data-small] {
        content: attr(data-small, url); <-- not working
       /*width:10px;*/ <-- this would work
    }
}

我在 Firefox 37.0.1、Chrome 42.0.2311.90 m 和 IE 11 上测试

如果我将浏览器的大小调整到非常小的宽度 (< 600px)，图像仍然是一样的。

Answer 1

content 属性用于 :before 和 :after 选择器。如何使用媒体查询。

<img src="images/img1.jpg" class="big_image" alt="">
<img src="images/img1small.jpg" class="small_image" alt="">

CSS 将是

@media (max-width:600px) {
    .small_image{ display:block }
    .big_image{ display:none }
}

@media (min-width:601px) {
    .small_image{ display:none }
    .big_image{ display:block }
}