收縮imgs在一個parrent div。該parrent div不縮小imgs

我是新的與CSS和IM卡住收縮imgs在一個parrent div。該parrent div不縮小imgs

我有一個父div包含3個imgs。當我縮小imgs時，parrent div保持原始大小。它縮小與imgs收縮。我如何確保div-img縮小？因爲在最後一個img之後我有很多額外的空間。

我試過al：block，inline-block，inline選擇器。

我希望你能幫助我。感謝您的時間。

<div class="logos"> 
     <div class="dealer">Ekris</div> 
     <img src="assets/img/bmw-logo.png" alt="" class="bmw-logo"> 
     <img src="assets/img/m-logo.png" alt="" class="m-logo"> 
     <img src="assets/img/i-logo.png" alt="" class="i-logo"> 
    </div> 


div.logos { 
display: block; 
background: blue; 
position: absolute; 
top: 0; 
right: 0; 
} 

.dealer { 
display: inline-block; 
font-size: 1.3em; 
font-family: Arial, serif; 
font-weight: bold; 
} 

img { 
width: 20%; 
height: 20%; 
}

來源

2017-03-14 Overste

我覺得這裏的問題是發生了什麼事的理解。由於您指定了圖像寬度的百分比，因此該百分比是父元素的百分比，而不是自然img大小的百分比。

爲了解決這個問題，圖像上的像素寬度和父div內的空間消失了。否則，如果你想填充空間，然後使用百分比加起來100％ - 例如。 5 x 20％寬度的圖像。另外，請考慮文本元素將佔用多大的寬度。

來源

2017-03-14 17:37:56

爲什麼downvote？ –

順便說一句，嘗試在圖像上放寬50％的寬度，你會看到它們佔據父div的一半。此外，您不需要應用高度百分比 - 如果只指定一個維度，圖像應按比例縮放比例。 –

對不起，原來的評論丟了。我認爲這是一個很好的評論，但可能不是一個答案，因爲它沒有經過測試。此外，甚至可以用百分比來解決問題，而不需要求助於固定像素。 – Pango

問題是，您正在設置圖像的寬度，但這些百分比是根據父級計算的。因此，如果您將圖片設置爲家長的15％，那麼他們只會佔用15％。例如，假設div是300px，300的15％是45。您有三個圖像。 3 * 45 = 135。然後，你有另一個寬度未知的div，佔用更多的空間，但只有文本的寬度。比如，對於一個簡短的名字，像你一樣，它只需要15px。所以現在你有135 + 15 = 150.但是你的div是300，所以這給你留下了150px的未填充空間。

目前尚不清楚您希望在這裏發生什麼，但是如果您希望設置您的div以佔用與父母等量的任何東西，則可以將其平分。如果你沒有在名字div上設置寬度，那麼這有點冒險，但是爲了爭辯，假設你想讓這四個項目佔據相同的寬度：100％/ 4 = 25％。

我還添加邊框周圍的div所以你可以看到發生了什麼，並留下了註釋掉40％，所以你可以取消對身邊打球並獲得所發生的事情的想法。

而且因爲沒有什麼是很容易的，因爲圖像是內聯的，因爲字體大小，它們有一些默認的間距。在這個例子中，我將父級的字體大小設置爲0，將其作爲未知量移除，然後在實際具有文本的div上設置字體大小。

再次，這取決於究竟你正在尋找，但瞭解正在發生的事情可以幫助你找出如何實現別的東西，如果這不是你腦子裏的東西。

https://jsfiddle.net/7p479cfq/1/

* { 
    box-sizing: border-box; 
} 

div.logos { 
    display: block; 
    background: blue; 
    position: absolute; 
    top: 0; 
    right: 0; 
    font-size: 0; 
    /* width: 40%; */ 
} 

.dealer { 
    display: inline-block; 
    font-size: 1.3em; 
    font-family: Arial, serif; 
    font-weight: bold; 
    width: 25%; 
    font-size: 14px; 
    border: 1px solid red; 
} 

img { 
    width: 25%; 
    border: 1px solid red; 
}

來源

2017-03-14 17:50:45 Pango

我在Chrome中測試了這個。當我從img中刪除width: 20%;時，額外的空間消失了。
我不知道爲什麼它很開心。我希望這能解決你的問題

來源

2017-03-14 17:53:11

收縮imgs在一個parrent div。該parrent div不縮小imgs

回答

相關問題