0

所以我有几个容器,里面有一个图像,只有当图像小于容器的宽度时,我才尝试向容器添加填充。我知道这将是一个简单的 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

4

2 回答 2

0

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

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

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

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

于 2013-10-10T01:54:24.897 回答
0

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

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

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

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

.image-container {
    text-align: center;
    background-color: #777;
}
于 2013-10-10T01:54:39.247 回答