流体图像以变量比例布局

处理独立布局中的流体图像如今已相当容易。然而，对于更复杂的界面，我们经常需要将图像放置在响应式元素内，例如这张卡片：

假设此图像是非语义内容，仅作装饰。这非常适合使用background-image。并且，由于此图像包含对象，我们不能在响应式布局时裁剪任何部分，因此我们选择background-size: contain。

问题在于：在移动设备上，此卡片方向发生变化并变为垂直方向，图像位于顶部。我们可以使用任何类型的 CSS 布局技术实现这一点，并且可能最好使用 CSS 网格或弹性盒。

但是，当我们测试较小的屏幕时，由于contain属性，我们会得到以下结果：

这不太理想。图像调整大小以保持其纵横比，不会裁剪任何细节，如果图像是重要内容并且不应裁剪，则我们不能将background-size更改为cover。

此时，我们的下一个尝试可能很熟悉：将图像内联放置，而不是背景。

在桌面设备上，这可以正常工作：

在移动设备上也不错：

但在较小的屏幕上，由于所有固定大小，图像的比例会失真。

我们可以花费数小时来调整图像、卡片和弹性属性，来回调整。或者，我们可以……

将主要内容与背景分离

这是在响应式图像方面获得更大灵活性和弹性的基础。虽然并非在所有情况下都能实现，但在许多情况下，只需在设计方面稍加努力即可实现，尤其是在预先计划这种方法的情况下。

在我们的下一次迭代中，我们将草莓图像放在透明背景上，并使用 CSS 设置光栅图像中的蓝色。通过调整样本空间的大小，继续在演示中使用视口大小进行操作！

仔细查看样式，请注意我们还向包含图像的 div 添加了填充，因此草莓不会过于靠近边缘。我们可以通过此填充完全控制我们希望它们有多近或多远。

请注意，我们还使用负边距来补偿外部卡片包装上的填充，否则图像周围会出现空白。

对内联图像使用 object-fit 属性

尽管之前的演示有效，但我们仍然可以改进这种方法。到目前为止，我们假设该图像是无语义内容——但在此布局中，图像插图也可能不仅仅是装饰。

如果是这种情况，我们绝对不希望图像被裁剪，因为这实际上相当于数据丢失。为了防止这种情况，最好将图像内联放置而不是背景，我们可以使用object-fit属性来实现。

我们已从背景中提取草莓，它现在是一个内联元素，但我们保留了同一图像 div 中的背景颜色。

最后，将object-fit: contain与100%宽度相结合，可以调整窗口大小并保持草莓的纵横比。但是，这种方法的缺点是，我们需要为桌面版本的图像设置固定高度——否则它将遵循设置宽度的比例（降低它会改变布局）。如果我们需要使用可变数量的文本生成这些卡片，这些文本会换行，这可能会使事情过于受限。

即将推出：aspect-ratio

上述问题的解决方案可能即将通过即将推出的aspect-ratio属性实现。这将允许设置元素的固定比例，例如：

.el {
  aspect-ratio: 16 / 9;
}

这意味着我们将能够消除固定高度并将其替换为我们计算的纵横比。例如，我们最后一个示例的桌面断点中的尺寸如下所示：

.image {
  /* ... */
  height: 184px;
  width: 318px;
}

使用aspect-ratio，我们可以删除高度声明并进行计算以获得最接近 184 的比例：

.image {
  /* ... */
  width: 318px; /* 基准宽度 */
  height: unset; /* 重置在媒体查询之外设置的高度 */
  aspect-ratio: 159 / 92; /* 接近 184px 高度 */
}

如果您想了解更多信息，可以在本文中更深入地探讨即将推出的属性。

最后，有多种方法可以在可变比例布局中实现可靠的响应式图像。但是，使这项工作更容易——并且更好——的技巧不一定在于 CSS；它可能很简单，只需调整您的图像，无论是将前景与背景分离（就像我们所做的那样），还是选择即使裁剪了相当一部分边缘仍然有效的特定图像。

以上是流体图像以变量比例布局的详细内容。更多信息请关注PHP中文网其他相关文章！