移动视图中的 CSS 图像保持率

Posted 2023-03-07

【中文标题】移动视图中的 CSS 图像保持率

【英文标题】：CSS image keep ratio when in mobile view

【发布时间】：2021-03-28 12:31:34

【问题描述】：

我有一个项目需要在网站中显示图像。此图像显示在背景上。 但是当我尝试将此图像适合移动视图时，图像的比例会失真。我不介意在移动视图中是否放大图像以保持尺寸不变。

<div class="relative h-screen" id="about">
...
    <img
        src="@/assets/img/about/background.png"
        
        class="absolute top-0 right-0 z-0 h-screen"
    />
...
</div>

这是图像在普通桌面视图中的显示方式。 Te 图像具有相对于其父 div 的绝对位置。它已固定在顶部和右侧。这是因为渐变来自左侧。

这就是图像在移动视图中的显示方式。图像被扭曲。

【问题讨论】：

看看object-fit和object-position：developer.mozilla.org/en-US/docs/Web/CSS/object-fit / developer.mozilla.org/en-US/docs/Web/CSS/object-position

【参考方案1】：

您可以尝试扩大图像的宽度和高度以填充视口，然后使用设置为cover 的object-fit 属性来调整图像大小并保持其纵横比。这将起作用，因为您用作背景的图像是替换元素：

img.absolute 
    width: 100%;
    height: 100vh;
    object-fit: cover;
    /* optionally, you can try adjusting the alignment of the image with obejct-position */
    object-position: 50% 50%;

您可以阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit，以便更好地了解调整替换元素的大小。