时间戳

首页 > 解决方案 > 移动视图中的 CSS 图像保持率

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

问题描述

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

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

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

这就是图像在移动视图中的显示方式。图像被扭曲。 在此处输入图像描述

标签： cssimagemobileresponsive-designtailwind-css

解决方案

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

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以更好地了解调整替换元素的大小。

推荐阅读