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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 01:05:39  来源:igfitidea点击:

CSS background image to fit height, width should auto-scale in proportion

css

提问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:coveron body

我刚刚遇到了同样的问题,这帮助我解决background-size:coverbody

html{
    height: auto;
    min-height: 100%;
}