仅当子级宽度不为100％时，才向容器中添加填充

Question

So I have a couple container holding that have an image and I'm trying to add padding to the container only if the images is less than the width of the container. I know this will be a simple javascript solution but is there a way to do this with css?

Example html:

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

css: I dunno :)

Take a look at this image to get a better idea of what I'm trying to do: http://grab.by/r1sS

Answer 1

It is not possible to add padding based on the image size using CSS.

Although, From the link you provided it looks like you are trying to center the image. You can achieve this by setting text-align to center on the container which will center the child elements ie. the image.

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

In regards to the original query, it is not possible to add padding based on the image size using CSS.

Answer 2

I'm not aware of any way to apply the exact conditional you're asking for in pure CSS since CSS has no conditionals.

But, based on your screen shot it seems like you don't need padding. Why not just center the image over a colored background. Won't that accomplish the same thing?

When the image is full width, it will cover the entire background and fill the container. When it's not full width, it will be centered in the container.

To center the image in the container and apply a background color:

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