HTML圖像和DIV調整

.d1 { 
    background-color: red; 
    text-align: center; 
} 

<div class="d1"> 
    <img src="http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg"> 
</div>

我用上述簡單的代碼來顯示在中間div一個image。代碼工作良好，但是當我調整窗口的大小在圖像的寬度以下，邊框/ div不包括圖像...有沒有辦法解決這個問題？ TYHTML圖像和DIV調整

來源

2017-08-20 darkchampionz

如果您想爲您的<div>使用背景圖片，我建議您將圖片設置爲您的div的background-image，並刪除<img>元素。

這將節省您從使用添加元素，也解決您的問題：

.d1 { 
 
    width:300px; 
 
    height:100px; 
 
    background-color: red; 
 
    text-align: center; 
 
    background-image: url(http://www.aliceseelywholesale.net/wp-content/uploads/ADB101-DAISY-CUTOUT-NARROW-LINK-BRACELET-300x100.jpg); 
 
    background-size:cover; 
 
}

<div class="d1">  
 
</div>

來源

2017-08-20 18:17:05

您好，感謝您的答覆。事實上，這樣做的效果更好，但這次的形象並不集中......你是否知道如何解決這最後一個？ – darkchampionz

添加'background-size：cover;' –

.d1 { 
    background-color: red; 
} 
.img{ 
    display: block; 
    width: 100%; 
    margin: 0px auto; 
}

對待圖像作爲嵌段含量不是內聯元件。

我希望這會有所幫助。

來源

2017-08-20 18:15:49 Rahel

HTML圖像和DIV調整

回答

相關問題