CSS 背景图像以适应高度,宽度应按比例自动缩放
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20093822/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image to fit height, width should auto-scale in proportion
提问by tanzio
I want background image fit with the height of the div, there's a way to do that? background-size:cover;
fit only with the width and height autoscale (I need the opposite effect).
Thanks.
我想要背景图像适合 div 的高度,有办法做到这一点吗?background-size:cover;
仅适合宽度和高度自动缩放(我需要相反的效果)。谢谢。
采纳答案by tanzio
background-size: contain;
suits me
适合我
回答by Langlois.dev
I know this is an old answer but for others searching for this; in your CSS try:
我知道这是一个旧答案,但对于其他搜索此问题的人来说;在你的 CSS 中尝试:
background-size: auto 100%;
回答by Beep
try
尝试
.something {
background: url(images/bg.jpg) no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}
回答by Diego Quispe
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(../images/bg-404.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Try This
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
<body class="bg">
</body>
回答by Simon
I just had the same issue and this helped me with background-size:cover
on body
我刚刚遇到了同样的问题,这帮助我解决background-size:cover
了body
html{
height: auto;
min-height: 100%;
}