如何“缩小”背景封面图像?

时间:2018-09-11 16:26:16

标签: html css

基本上,当我的背景封面图片位于笔记本电脑设备的显示宽度(屏幕1025像素至1280像素)中时,将被“放大”。我已经在智能手机设备上开始了我的项目-320像素到479像素,并且背景图像的封面非常完美,就像我想要的那样。但是,现在已经在笔记本电脑的屏幕设备上工作了,因此决定“放大”我的封面图像。这样做的原因之一可能是我可能需要调整在新加坡拍摄的特定图像吗? 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-->

enter image description here

1 个答案:

答案 0 :(得分:1)

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

cover将始终找到填补其所有者的方法。

另一方面,

contain将始终通过将图像的最大面设置为最大所有者面来保持图像完整性。