只有當孩子不是100％寬度時才添加填充容器CSS

Question

所以我有一對容器容納有一個圖像，我試圖添加填充容器只有當圖像小於容器的寬度。 我知道這將是一個簡單的JavaScript解決方案，但有沒有辦法用CSS做到這一點？

HTML示例：

<div class="image-container"> 
    <img scr="my/path/to/image"/> 
</div> 
<div class="image-container"> 
    <img scr="my/path/to/image2"/> 
</div> 

CSS：我不知道:)

看看這個形象得到什麼，我試圖做一個更好的主意：http://grab.by/r1sS

Answer 1

它不可能使用CSS添加基於圖像大小的填充。

雖然，從您提供的鏈接看起來，您似乎試圖將圖像居中。你可以通過設置文本對齊來實現這一點，以居中放置子元素的容器爲中心。圖片。

.image-container { 
    text-align: center; 
} 

關於原始查詢，不可能使用CSS添加基於圖像大小的填充。

Answer 2

我不知道有什麼方法可以應用純CSS所要求的確切條件，因爲CSS沒有條件。

但是，根據你的屏幕截圖，你似乎不需要填充。爲什麼不把圖像置於彩色背景上。這不會完成同樣的事情嗎？

當圖像是全寬時，它將覆蓋整個背景並填充容器。當它不是全寬時，它將在容器中居中。

要居中圖像中的容器和應用背景色：

.image-container { 
    text-align: center; 
    background-color: #777; 
}