README

在CSS中实现类似HTML5的响应式背景图像（某种意义上…）

关于

responsive-images-css 的目的是简化在CSS中创建响应式背景图像的过程。它通过HTML5中 <img srcset="…" sizes="…"> 的响应式图像语义提供类似的功能。

标准HTML5响应式（前景）图像的渲染序列是一个高度复杂的过程。完全预测浏览器将选择哪个确切图像候选是不可能的，因为一些决策可能取决于仅在运行时才可用的环境设置（例如网络性能）。

相比之下，responsive-images-css 在服务器端生成CSS代码——也就是说，在浏览器开始解释生成的输出之前很久。为了使其工作，必须做出一些假设

生成器需要一个固定的 em到像素的比率 来可预测地处理em / rem值。
生成器仅使用指定的断点，即使图像候选建议额外的步骤。
必须明确提供CSS应渲染的 设备密度（分辨率）。

用法

生成器

创建响应式背景图像始终从一个全新的 Generator 实例开始

use Jkphl\Respimgcss\Ports\Generator;

$breakpoints = ['24em', '36em', '48em']; // CSS Breakpoints 
$emToPixel = 16; // EM to PX ratio

$generator = new Generator($breakpoints, $emToPixel);

如您在示例中看到的，Generator 接受一个CSS断点列表和一个 em到px的比率 作为构造函数参数。如果省略，后者默认为 16。断点仅与基于宽度的图像候选集和一个sizes规范（在其他所有情况下，您可以传递一个空数组）一起使用。

图像候选

接下来，您必须为响应图像的各个状态注册一些 图像候选。文件名不会被验证——它们将原样用于生成的CSS。

// Use a `srcset`-like combined file name + width descriptor string ...
$generator->registerImageCandidate('small-400.jpg 400w');

// ... or an explicit width / resolution descriptor as second argument
$generator->registerImageCandidate('medium-800.jpg', '800w');
$generator->registerImageCandidate('large-1200.jpg', '1200w');

与HTML5响应图像一样，您可以为图像候选使用 分辨率 或 基于宽度的描述符，但请注意，您不允许在单个图像候选集中混合它们。

$generator->registerImageCandidate('small-400.jpg', '1x');
$generator->registerImageCandidate('medium-800.jpg', '2x');

编译CSS规则集

最后，为了创建响应图像CSS，调用生成器的 make() 方法并将您选择的 CSS选择器 应用到生成的CSS规则集上

$cssRuleset = $generator->make([1.0, 2.0]);
echo $cssRuleset->toCss('.respimg-container');

传递给 make() 方法的浮点数字列表是您希望CSS渲染的 设备像素密度/分辨率。如果您省略此参数，则仅考虑默认密度 1.0。输出将类似于以下内容（未格式化）

.respimg-container {
    background-image: url("small-400.jpg");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi),(min-resolution: 2ddpx) {
    .respimg-container {
        background-image: url("medium-800.jpg");
    }
}

如您在示例中看到的，仅指定了图像候选的 background-image 属性。要实现完全功能的响应式图像，您还需要一些额外的CSS行——然而，为了给您完全的控制权，添加这些内容到您的整体CSS取决于您。

示例

一个最小化、所有内容内联的HTML/PHP示例文档，包含响应式背景图像可能看起来像这样

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Example document with responsive background image</title>
        <style>
            .respimg {
                padding-bottom: 75%; /* 4:3 aspect ratio */
                background-repeat: no-repeat;
                background-position: top left;
                background-size: cover;
            }
            <?php
            
            $generator = new Jkphl\Respimgcss\Ports\Generator();
            $generator->registerImageCandidate('small-400.jpg', '1x');
            $generator->registerImageCandidate('medium-800.jpg', '2x');
            echo $generator->make([1, 2])->toCss('.respimg');
            
            ?>
        </style>
    </head>
    <body>
        <div class="respimg"></div>
    </body>
</html>

使用 `sizes`

HTML5响应式图片的一个非常强大的功能是sizes属性，它允许您进一步描述图片的显示方式。responsive-images-css旨在在合理范围内支持sizes规范，以便您可以使用与<img srcset="…" sizes="…">相同的值。

$cssRuleset = $generator->make(
    [1, 2], // Device resolutions
    '(min-width: 400px) 50vw, (min-width: 800px) 33.33vw, 100vw' // Image sizes
);

生成器会尝试计算已注册断点的预期图片大小，并相应地选择合适的图片候选者。请注意，

sizes只能与基于宽度的图片候选集结合使用，
当使用sizes时，您必须向Generator构造函数提供断点，并且
用于sizes值的断点应该与已注册的全局断点相匹配。

安装

此库需要PHP 7.1或更高版本。我建议基于原则使用最新版本的PHP。它没有用户空间依赖。您可以通过Composer作为jkphl/responsive-images-css安装和自动加载。

composer require jkphl/responsive-images-css

或者，下载一个发布版本或克隆此存储库，然后需要或包含其autoload.php文件。

依赖

质量

要在命令行运行单元测试，请发出composer install，然后在包根目录中运行phpunit。这需要Composer作为composer可用，并且PHPUnit作为phpunit可用。

此库尝试遵守PSR-1、PSR-2和PSR-4。如果您注意到遵守疏忽，请通过拉取请求发送补丁。

贡献

发现了错误或有功能请求？请首先查看已知的问题，并在必要时打开新问题。请参阅贡献和行为准则以获取详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件joschi@kuphal.net而不是使用问题跟踪器。

jkphl / responsive-images-css

维护者

详细信息

README

关于

用法

生成器

图像候选

编译CSS规则集

示例

使用 `sizes`

安装

依赖

质量

贡献

安全

鸣谢

许可

jkphl / responsive-images-css

维护者

详细信息

README

关于

用法

生成器

图像候选

编译CSS规则集

示例

使用 sizes

安装

依赖

质量

贡献

安全

鸣谢

许可

使用 `sizes`