[英]CSS stretch or fit background image
I wanted to stretch or fit my background image using css so it is always in 100% of width and height no matter what the screen size is. 我想使用css拉伸或调整我的背景图像,因此无论屏幕大小如何,它总是在宽度和高度的100%。 This is asked many times and everyone suggests to use background-size:100% and it will work. 这被问了很多次,每个人都建议使用背景大小:100%,它会工作。 but using background-size only fits my image's width and the height is still cropped. 但使用背景大小只适合我的图像宽度,高度仍然被裁剪。
I'll appreciate if someone can help me with this. 如果有人可以帮助我,我将不胜感激。
Thans very much 非常多
EDIT: 编辑:
You tried background-size: 100%
, 你试过background-size: 100%
,
CSS interprets this as 100% width, automatic height
which will look like this: CSS将此解释为100% width, automatic height
,如下所示:
background-size: 100% auto;
What you want is the second argument (height) to be 100% too, so you should do this: 你想要的是第二个参数(高度)也是100%,所以你应该这样做:
background-size: 100% 100%;
END EDIT 结束编辑
Try: 尝试:
background-size: cover;
This will fit the width or height and overflow the rest 这将适合宽度或高度,并溢出其余部分
Or: 要么:
background-size: contain;
This will make the image as large as possible without changing it's aspect ratio. 这将使图像尽可能大,而不会改变它的纵横比。
You can read more about the css3 background-size property HERE 您可以在这里阅读有关css3 background-size属性的更多信息
You can try: 你可以试试:
background: url('Your image URL') 100%;
or 要么
background: url('Your image URL') 100% no-repeat;
Try this CSS rule: 试试这个CSS规则:
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center
background-size: cover; // this makes img full-screen (full-width & full-height)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.