时间戳

首页 > 解决方案 > 背景图像太放大

html - 背景图像太放大

问题描述

我在 div 上的背景图像看起来过于放大并且不清楚它失去了清晰度这是我尝试过的 html 和样式

<div class="grid-x intro">
        <div class="cell large-12 medium-12 small-12 one">
        </div>
      </div>
        <!-- end of intro -->
styling

.intro{

background-image: url("../images/house4.jpg");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}

标签： htmlcsszurb-foundation

解决方案

在这里没关系...使用"background-size: 100% auto;" 这是因为您的图像比您使用的高度更宽background-size: cover;。为了覆盖所有背景，这就是为什么它被缩放和裁剪的剩余宽度 你的代码是好的，只需使用调整大小的图像，如 500px*333.2px（或大约这个比例）来显示 66.64% 填充内的所有图像 

.intro{

background-image: url("https://image.freepik.com/free-vector/geometric-models-gradient-background_23-2148326516.jpg");
background-size: 100% auto;
background-repeat: no-repeat;
width: 100%;
/* height: auto; */
padding-top: 66.64%;
}
<div class="grid-x intro">
        <div class="cell large-12 medium-12 small-12 one">
        </div>
      </div>
        <!-- end of intro -->

推荐阅读