Question

我有一张照片，我必须用于登陆页面的全尺寸封面图片。图为3680 * 2456px。当我在我的代码中设置图片时，图片会缩放，这意味着我可以看到图片的一半。因此我尝试将其调整为1024 * 683像素，这导致我的照片填满了横幅的一半。

如何让我的照片适合我的横幅，所以它不是缩放？

.fullscreen {
        width:100%;
        min-height:100%;
    	background-repeat:no-repeat;
        background-position:50% 50%;
        background-position:50% 50%\9 !important;
        background-image:url(/img/seminar/bg.jpg);
        background-size
    }
    .overlay {
        background-color: rgba(0, 0, 0, 0.5);
        position: relative;
        width: 100%;
        height: 100%;
        display: block;
    }

<div class="fullscreen landing parallax">
            <div class="overlay">
                <div class="container">
                    <div class="row">
                        <div class="col-md-7">
                            <!-- /.logo -->
                            <div class="logo"><a href="https://site.dk/"><img src="http://site.dk/img/site-logo-white.png" alt="logo"></a></div>
                        </div>
                    </div>
                 </div>
            </div>
    </div>

Answer 1

尝试：

.fullscreen {
        background: url(/img/seminar/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

而不是原来的.fullscreen CSS。

这段代码可以通过CSS Tricks网站找到。

Answer 2

这应该有效。将图像高度和宽度设置为100％

<img src="http://site.dk/img/site-logo-white.png" alt="logo" style="width: 100%; height: 100%;" />

修改：要在CSS中执行此操作

.fullscreen img {
    width: 100%;
    height: 100%;
}

全尺寸封面正在缩放

2 个答案: