html - 仅当子项不是 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

score 0 · Accepted Answer

无法使用 CSS 根据图像大小添加填充。

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

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

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

score 0 · Accepted Answer

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

但是，根据您的屏幕截图，您似乎不需要填充。为什么不把图像放在彩色背景的中心。那不会完成同样的事情吗？

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

要将容器中的图像居中并应用背景颜色：

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

2 回答 2