如何才能使位于我网站顶部的图片正确缩放或缩小？

Question

我的网站顶部有一个空间，里面有图像。

图像宽2800像素，高400像素。

我想在这个图像的顶部放置400px，但由于图像太宽，有没有办法使它适合而不会让它看起来模糊？

<div class="bg"></div>

.bg {
    background: url('..//img/top-img.jpg') no-repeat center center;
    position: fixed;
    width: 100%;
    height: 400px; 
    top:0;
    left:0;
    z-index: -1;
}

Answer 1

您可以将其添加到.bg

background-size: cover;

然而，这将在需要时裁剪您的图像

关于模糊性？这里没有解决方案，但是为了让你的图像更大，但正如我所看到的，你的图像已经足够大，使其变大会使加载变慢。