Question

我目前正在使用图片srcset作为响应式图片，目前正在寻找一种方法来缩放或覆盖整个元素或容器，就像css background-size: cover或object-fit一样。我已经读过，只适用于img标签的对象适合是否有srcset的替代方案。我使用Drupal 8响应式图像模块，它呈现picture元素

<picture>
    <source srcset="/aim-beta/sites/default/files/styles/thumbnail/public/2017-08/admissions-banner-how-to-apply-alt.jpg?itok=O11apfmI 1x" media="all and (max-width: 480px)" type="image/jpeg">
    <source srcset="/aim-beta/sites/default/files/styles/medium/public/2017-08/admissions-banner-how-to-apply-alt.jpg?itok=QrLnqmKd 1x" media="all and (max-width: 768px)" type="image/jpeg">
    <img srcset="/aim-beta/sites/default/files/2017-08/admissions-banner-how-to-apply-alt.jpg" alt="Admissions - How to Apply" typeof="foaf:Image">
</picture>

Answer 1

object-fit适用于自适应图片，因为您为<img>设置了样式，而不是<picture>。

图像源srcset的对象适合解决方案

1 个答案: