html - 如何 "zoom-out"背景覆盖图像？

Question

基本上，当我的背景封面图片处于笔记本电脑设备的显示宽度(屏幕 1025 像素到 1280 像素)时，它会被“放大”。我已经在智能手机设备上开始了我的元素——320px 到 479px，背景图像封面非常完美，是我想要的样子。但是，现在已经在笔记本电脑屏幕设备上工作，它决定“放大”我的封面图片。这样做的原因之一是我可能需要调整这张在新加坡拍摄的特定照片吗？CSS

[![.singapore {
    width: 100%;
    height: 100%;
    background: url("img/SINGA1.JPG") top center;
    display: table;
    top: 0;
    background-size: cover;
    border-bottom: 1px solid black;
}

.singapore .inner {
    display: table-cell;
    vertical-align: middle;
    width: 80%;
    max-width: none;
}][1]][1]

html

<section class="singapore">
    <!--sinapore-->
    <div class="inner">

        <div class="content">

            <h1>Singapore</h1>

            <p>Beautiful landscapes, friendly locals and an unforgettable paradise</p>

            <button>View Album</button>

        </div>
        <!--CONTENT-->

    </div>
    <!--INNER-->

Answer 1

您正在寻找 background-size: contain; 属性。

cover 总会找到一种方法来填充他的所有者。

另一方面，

contain 将始终保持图像完整性，方法是将其最大边设置为等于最大所有者的边。