如何基于图像大小在CSS中添加背景大小？

Question

I am working on a project where the user will be able to select or upload an image and it will be displayed inside of these circles. The images are dynamically being added as background-images. The problem comes in when I am trying to set the background-size. If the image is larger than the circles, I would like it to have a background-size cover, so it scales down. If the image is smaller than the circle, I don't want it to scale up or anything so setting no background size achieves this effect.

Any ideas on how I could achieve this?

The main html looks like this:

<div class="image-boundary">
    <div class="content">
        <div class="image-boundary-photo img-responsive" style="background-image: url('https://www.fillmurray.com/g/100/100');" alt="">
        </div>
    /div>
</div>

css:

.module-list-home .content .image-boundary-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  text-align: center;
  background-repeat: no-repeat;
  background-position: center;
}

Here is the codepen of my example. http://codepen.io/johnsonjpj/pen/zKyGZp?editors=1100 The third image should have a background-size: cover; because it is bigger while the others should stay the way they are.

Answer 1

You might get some mileage out of the background-size setting " contain ".

I've added it inline to your pen, for a view, here: http://codepen.io/cam5/pen/vXvNOq?editors=1100

It upsizes when they are too small, so might not be entirely what you're after. But querying image's size is very likely going to involve some javascript. This is a CSS-only approach.

<div class="image-boundary-photo img-responsive" 
     style="background-image: url('https://www.fillmurray.com/g/100/100');
     background-size: contain;" alt="It's Bill Murray.">
</div>

From MDN :

contain

A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. The image is automatically centered unless over-ridden by another property such as background-position.

Answer 2

Have you tried setting the property background-size: contain; in the .module-list-home .content .image-boundary-photo class?

To solve the problem of small images also getting too large using background-size: contain; use the size as in percentage. eg

set the property background-size:60%; in the .module-list-home .content .image-boundary-photo class instead of contain and i think your problem will be solved.

Hope this helps.

[Edit]

Also wrote solution with jquery dynamically checking image size and adjusting. Here is the jquery solution: http://codepen.io/Nasir_T/pen/ZpVbJo . Make sure your page has the jquery.min linked.

Answer 3

Try this

$('.img-responsive').each(function(key, el) {
    var img = new Image;
    img.src = $(el).css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
    if ($(el).width() <= img.width || $(el).height() <= img.height)
        $(el).css('background-size', 'cover');
})

here is a working example