<source> 媒体属性 - 容器的宽度而不是屏幕的宽度？

Question

我正在使用 <picture></picture> 标签在评估图像所在容器的大小后以响应方式显示图像。

一些示例代码：

<picture>
            <source media="(max-width: 70px)" srcset="IMAGE_URL">
            <source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL">
            <source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL">
            . . .
            <img src="IMAGE_URL" alt="An image">
</picture>

但是，上述格式的实现中的 <source media="(MEDIA_QUERY)" ... > 部分考虑了整个屏幕的宽度，而不是 <picture></picture> 当前所在的容器。

需要帮助。

Answer 1

不幸的是，（目前）还没有标准的方法来让响应行为基于容器而不是浏览器视口。

有 community efforts around Container Queries，但尚未定义任何最终可能成为标准的内容。

有几个 JavaScript 库，例如 EQCSS，试图提供解决方案，但需要 JavaScript 进行演示——因此 CSS——工作通常不是好主意。

你也可以看看CSS Conditions，不过还需要JavaScript。

Answer 2

您可以使用 srcset 并指定图像大小：

    <div class="container">
    <img src="image-200.jpg" 
        srcset="image-100.jpg 100w, image-200.jpg 200w,
                 image-400.jpg 400w, image-800.jpg 800w,
                 image-1000.jpg 1000w, image-1400.jpg 1400w,
                 image-1800.jpg 1800w" /> 
    </div>

浏览器将下载最佳图像文件。

<source> 媒体属性 - 容器的宽度而不是屏幕的宽度？

<source> media attribute - width of container rather than screen?

image

responsive-design

responsiveness

responsive-images