使用CSS和媒体查询替换图像

Question

我有一张图片，我想根据屏幕尺寸（即媒体查询）切换它的css。现在，代码看起来像这样

<img src="image.jpg" widht="20" height="20" alt="Logo"/>

当然它的内部宽度和高度都是用内联编写的。

在我的CSS中，我想改变图像的大小。例如，在全屏幕上，我希望图像显示其全宽，在移动屏幕上我想显示width of 200px。我如何通过CSS和媒体查询实现这一目标。

感谢。

Answer 1

它非常简单，只需指定要定位的媒体类型和断点即可。例如。

FOR DESKTOP

img { width:100%; height:auto }

FOR MOBILE

@media screen and (max-width:640px) {
    img { width:100%; max-width:200px; height:auto; }
}