html - 使用 CSS 在 div 中居中图像，周围留有空白

Question

我目前有一张占据整个 div 的背景图片(由于 background-size:contain)。我怎样才能使它只有 75% 左右的大小(所以它周围都是空白？)。屏幕截图包含在代码下方。

我试过使用填充，但除非我做错了什么，否则它似乎不起作用。

.dropzone {
    border: 2px dashed #0087F7;
    background-color: #FFFFFF;
    background-image: url('download.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

Answer 1

您也可以尝试将 background-size 值以像素为单位。

.dropzone-wrap {
    padding: 20px;
    border: 2px dashed #0087F7;
 }
.dropzone {
    height: 60px;
    background-color: #FFFFFF;
    background-image: url('https://cdn4.iconfinder.com/data/icons/essential-part-1/32/12-Download-512.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

<div class="dropzone-wrap">
  <div class="dropzone"></div>
</div>

希望对您有所帮助。如果有任何问题，请告诉我。