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

【问题标题】：Image Replacment with CSS and media query使用 CSS 和媒体查询替换图像
【发布时间】：2014-06-02 03:47:00
【问题描述】：

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

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

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

桌面版

img { width:100%; height:auto }

手机版

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

【讨论】：

我是否必须从内联中获取宽度和高度并将其放入 css 中？
不，内联的东西可以保留，它基本上说“这是我的默认比例”，css将从那里放大图像。这些属性不是强制性的，但它们是很好的做法。 :)
它不工作。移动尺寸工作正常，但桌面没有改变。我实际上输入的是 PX 值而不是 100%。该文件100％很大。因此我需要将其浓缩。
对不起，我想我误解了部分问题。您的意思是保持桌面的默认图像大小并在移动设备上缩放到 200 像素宽吗？如果是这样，我已经创建了一个可能的解决方案。让我知道这是否是您的意思:) jsfiddle.net/cK3ay/1
是的，我就是这个意思。谢谢。