问答中心分类: CSS使背景图像适合 div
0
匿名用户 提问 10小时 前

我在以下 div 中有一个背景图像,但图像被截断:

Is there a way to show the background image without cutting it off?
grc 回复 10小时 前

图片比div大吗?

grc 回复 10小时 前

是的,图像比 div 大

grc 回复 10小时 前

背景图片:url(/media/img_1_bg.jpg);背景尺寸:包含;背景重复:不重复;

6 Answers
0
Sertage 回答 10小时 前

如果您需要的是具有与 div 相同尺寸的图像,我认为这是最优雅的解决方案:

background-size: 100% 100%;

如果不是,@grc 的答案是最合适的。
资源:http://www.w3schools.com/cssref/css3_pr_background-size.asp

Junaid 回复 10小时 前

但这会拉伸图像……有没有办法在不拉伸的情况下适应背景图像?

Learner 回复 10小时 前

然而,纵横比丢失了。

Vaibhav Vishal 回复 10小时 前

@Learner 如果您更改图像的尺寸而不裁剪图像,则纵横比将丢失 99% 的时间。这是常识。

0
hojjat.mi 回答 10小时 前

您可以使用此属性:

background-size: contain;
background-repeat: no-repeat;

然后你的代码是这样的:

<div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">
0
Abhijeet1520 回答 10小时 前
background-position-x: center;
background-position-y: center;
0
Christian 回答 10小时 前

你也用这个:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

我不知道你的 div 值,但我们假设你有这些。

height: auto;
max-width: 600px;

同样,这些只是随机数。为 div 制作具有固定宽度的背景图像(如果您愿意的话)可能非常困难,因此最好使用 max-width。实际上,用背景图像填充 div 并不复杂,只需确保以正确的方式设置父元素的样式,这样图像就有了可以进入的位置。
克里斯

John Lee 回复 10小时 前

链接到一个高度投票的答案,该答案更详细地讨论了这个解决方案:stackoverflow.com/questions/600743/…并向您展示如何计算padding-top.

0
Codemaker 回答 10小时 前

尝试以下任何一项,

background-size: contain;
background-size: cover;
background-size: 100%;

.container{
    background-size: 100%;
}