在使用scrset
时,有没有可能防止图片放大?
以下是一个jsbin示例,展示了我的疑问:
浏览器(Firefox、Chrome、Safari)使用最大的图片来填充容器,即使它的宽度(500px)更小。我希望它能智能地根据视口宽度使用最佳图片,但不要将图像放大。
是否有一种方法可以防止这种情况发生,而不必编写内联的style="max-width:500px"
?
在使用scrset
时,有没有可能防止图片放大?
以下是一个jsbin示例,展示了我的疑问:
浏览器(Firefox、Chrome、Safari)使用最大的图片来填充容器,即使它的宽度(500px)更小。我希望它能智能地根据视口宽度使用最佳图片,但不要将图像放大。
是否有一种方法可以防止这种情况发生,而不必编写内联的style="max-width:500px"
?
看起来带有 srcset
的图像总是会进行放大,即使提供了低分辨率的图像。很难搜索到相关文档,因为所有人使用的示例都假定您已经有高分辨率的图像。在我的情况下,我正在构建一个“响应式图像”React组件,该组件处理由CMS提供的用户提供的图像。但并非所有图像都是高分辨率的。
我的解决方案涉及一些CSS平衡,包括图像本身和其包装的<figure>
标签上的width
和max-width
。(当然,这可以是div
或任何其他东西)
CSS:
img {
max-width: 100%;
}
figure {
width: 100%;
}
HTML:
此内容根据可用图像尺寸生成。在CMS侧,我会创建2400px、1600px、1200px、800px和400px宽的缩略图,但仅当源图像大于该尺寸时才创建。然后<figure>
标签获取所有调整大小后的图像以及原始图像。然后为了防止图像放大,figure
标签获得最大图像可用的最大宽度。
因此,如果源图像只有500px宽:
<figure class="" style="max-width: 500px;">
<img src="http://example.com/images/img_7804a_web.jpg"
srcset="http://example.com/images/img_7804a_web-400x600.jpg 400w,
http://example.com/images/img_7804a_web.jpg 500w"
sizes="100vw"
alt="alt text">
</figure>
<figure class="" style="max-width: 1125px;">
<img src="http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg"
srcset="http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-400x533.jpg 400w,
http://stephanie.standard-quality.biz/thumbs/projects/2016/cargo-cults/cargocults_basketwoman_web-800x1067.jpg 800w,
http://stephanie.standard-quality.biz/content/projects/18-2016/3-cargo-cults/cargocults_basketwoman_web.jpg 1125w"
sizes="100vw"
alt="alt text">
</figure>