Mar*_*ean 6 html html5 responsive-design pixel-ratio
对于网站上的每个帖子,都会有一个标题图片.此图像的宽度100vw和高度均为300px.我想通过标签的srcset属性img或完整的picture元素提供此图像的多个版本(此时不确定是哪个,因此这个问题).
使用该srcset属性这样做会很容易:
<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">
当我想考虑不同的设备像素比率时出现问题.首先,假设我2x和3x所有列出的图像的版本srcset上面.
假设我有一个2x带有全320px视口的手机(例如iPhone 5).我想要加载浏览器xs_2x.jpg.同样,假设我有1x一个带宽屏显示器的桌面.我想要加载浏览器lg.jpg.
但现在,让我们说我有一个更大的手机,一用一3x,414px-宽视(即iPhone 6加).在这种情况下,我希望我的浏览器加载sm_3x.jpg.但是,我的浏览器可能会加载,sm_2x.jpg因为sm_2x.jpg(1536像素)的宽度更接近手机的宽度(1242像素)而不是宽度sm_3x.jpg(2304像素).这将导致设备上的图像不300px高,从而破坏了网站的要求.
如何实现动态宽度,静态高度,DPR意识的响应图像？
小智 0
background-size: 100% cover;
这应该有效。
编辑：这有效的简单原因是因为你可以单独在 CSS 中完成它。背景大小将覆盖可用空间，请参阅文章：http://davidwalsh.name/background-size
创建一个 css 类：.img-resp { background-size: 100% cover; }然后将其应用到您的元素。