html - 我们如何使用图像标签为移动设备和笔记本电脑设备显示不同的图像?

标签 html css

我的要求是为移动设备显示一张图片,为笔记本电脑设备显示另一张图片,我尝试使用图片标签,但它对我不起作用。

我想使用 html 为移动设备和笔记本电脑设备显示不同的图像 的图片标签?

最佳答案

好吧,这并不完全是您所需要的,因为它不检查设备的类型,而只检查设备的大小……但我想在 RWD 世界中这就足够了。

您可以使用 srcset。因此,您可以放置​​更多图片,而不是只提供一张图片,浏览器会完成所有工作,选择要显示的图片:

举个例子:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">

这背后的逻辑非常聪明,因为浏览器会尝试找到最适合的图像。

您可以阅读有关该主题的更多信息:

关于html - 我们如何使用图像标签为移动设备和笔记本电脑设备显示不同的图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55547704/

相关文章:

javascript - 如何只绘制这部分圆弧?

html - 将一个 div 放置在同级 div 的子元素中

javascript - 通过 prop 使用带有 React 组件的 CSSModules 动态 CSS

css - 如何将背景图像设置为源文件夹中的图像?

html - 将 div 放在另一个 div 的中间

javascript - 将 <b></b> 标签添加到文本区域中的选定文本

html - <th> 标记的位置无效

javascript - 如何使用Jquery将一个html代码重用到另一个html?

javascript - 获取 CSS 百分比宽度返回像素。我需要与我在 .css 文件中的 CSS 样式中设置的百分比相同或与属性内联

html - 需要有关 Internet Explorer 9 显示问题的帮助