你如何在桌面上制作一个特定大小的img，在移动设备上制作100％的宽度？

Question

我正在尝试使用桌面浏览器将图像元素设置为特定大小（600px），并且我希望在移动设备上使用浏览器时图像元素的宽度为100％。

帮助将不胜感激。 ：）

Answer 1

考虑使用媒体查询

img {display:block;}

/* apply to screens 769px or greater */
@media (min-width:769px) {
     img {width:200px;}
}
/* apply to screens 768px or smaller */
@media (max-width:768px) {
     img {width:100%;}
}

Answer 2

对于移动使用媒体查询

.your-img {
    max-width: 500px;
    width: 100%;
}

@media (max-width: 768px) {
    .your-img {
        max-width: 100%;
        width: auto;
    }
}

并且不要忘记头元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">