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

Question

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

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

当然它的宽度和高度是内联写的。

在我的 CSS 中，我想更改图像的大小。例如，在全屏上，我希望图像显示其全宽，而在移动屏幕上，我想显示 width of 200px。 .我怎样才能通过 CSS 和媒体查询实现这一点。

谢谢。

Answer 1

它真的很简单，只需指定您要定位的媒体类型和断点。例如。

对于桌面

img { width:100%; height:auto }

手机版

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