英文:
Center image in a div with blank space around it using CSS
问题
You can achieve this by adjusting the background-size property to 75% or any desired size. Here's the modified CSS code:
.dropzone {
border: 2px dashed #0087F7;
background-color: #FFFFFF;
background-image: url('download.png');
background-repeat: no-repeat;
background-position: center;
background-size: 75%; /* Adjust this value as needed */
}
这样可以将背景图的大小调整为所需的百分比，例如 75%。
英文:
I currently have a background image that is taking up the whole div (due to background-size:contain). How can I make it only 75% or so of it's size (so there's white space all around it?). Screenshot is included below code.
I've tried using padding but unless I'm doing something wrong it doesn't seem to work.
.dropzone {
border: 2px dashed #0087F7;
background-color: #FFFFFF;
background-image: url('download.png');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
答案1
得分: 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>
英文:
You can also try putting background-size value in pixels.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.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;
}
<!-- language: lang-html -->
<div class="dropzone-wrap">
<div class="dropzone"></div>
</div>
<!-- end snippet -->
I hope this helps. Please let me know if any question.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论