仅当子项不是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无法根据图像大小添加填充。

虽然，从您提供的链接看起来您正试图使图像居中。您可以通过将text-align设置为容器的中心来实现这一点，容器将使子元素居中，即。图像。

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

关于原始查询，无法使用CSS基于图像大小添加填充。

Answer 2

我不知道有任何方法可以在纯CSS中应用你要求的确切条件，因为CSS没有条件。

但是，根据您的屏幕截图，您似乎不需要填充。为什么不将图像置于彩色背景上。这不会完成同样的事情吗？

当图像为全宽时，它将覆盖整个背景并填充容器。当它不是全宽时，它将在容器中居中。

将图像置于容器中心并应用背景颜色：

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