Question

我正在努力让我的英雄形象反应灵敏。在正常情况下它们是16：9但在移动版本中我希望浏览器显示我以1：1的比例制作的另一个图像。但是，在某些设备上，它仍然显示16：9版本。这特别适用于三星Galaxy S6。

我无法真正理解解决方案，说实话，我附近没有任何类似的产品可以来回测试。

我知道我失踪了很多。我现在昏了过去..

<img src="{{ 'mainad1-image-2880.jpg' | asset_url }}" width="2880" srcset="
{{ 'mainad1-image-406.jpg' | asset_url }}  406w, 
{{ 'mainad1-image-608.jpg' | asset_url }}  608w, 
{{ 'mainad1-image-800.jpg' | asset_url }}  800w, 
{{ 'mainad1-image-1024.jpg' | asset_url }}  1024w, 
{{ 'mainad1-image-1050.jpg' | asset_url }}  1050w, 
{{ 'mainad1-image-1200.jpg' | asset_url }}  1200w, 
{{ 'mainad1-image-1440.jpg' | asset_url }}  1440w, 
{{ 'mainad1-image-1920.jpg' | asset_url }} 1920w, 
{{ 'mainad1-image-2880.jpg' | asset_url }} 2880w" 
sizes="(max-width: 2880px) 100vw, 2880px" 
alt="{{ settings.mainad_1_alt_text }}"/>

Answer 1

根据视口宽度更改图像的纵横比是响应图像的Art Direction用例之一。

只能使用<picture>语法解决。

srcset属性仅处理在所有视口宽度上保持相同宽高比和内容的图像。

某些设备上的自适应图片不正确

1 个答案: