gpt4 book ai didi

html - 如何在不裁剪顶部或底部的情况下将图像放入容器中以保持图像质量

转载 作者:行者123 更新时间:2023-11-28 02:44:00 24 4
gpt4 key购买 nike

全部。我正在尝试将图像设置为 div 容器内的背景,该容器始终具有设备屏幕的尺寸。为此,我提供了如下的 CSS

.outer {
height: 100vh;
background-image: url(demo_top.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center;
}
<body>
<div class='outer'>
</div>
</body>

这段代码的正面:- 保持图像质量。此代码的缺点:- 背景图像没有反应,因为焦点只在中心-图像的顶部和底部被裁剪,因为该位置用作中心。

我正在寻找的是我的 div 来显示整个图像而没有任何裁剪或图像拉伸(stretch)或扭曲。我使用的图像尺寸是 2000x2000

最佳答案

如果您希望图像与您的容器具有相同的尺寸,则必须使用相同的图像比例。在这种情况下,容器也必须是正方形 (1x1)。如果两个元素的比例不相等,唯一的解决办法是拉伸(stretch)图像的一侧或剪切它。

enter image description here

关于html - 如何在不裁剪顶部或底部的情况下将图像放入容器中以保持图像质量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47011857/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com