適合圖片源srcset的物體貼合解決方案

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>。