How to Keep Aspect Ratio of a Background-Image

How to keep aspect ratio of a background-image?

Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:

.background-1,

.background-2,

.background-3 {

  /* Set the background image, size, and position. */

  background-image: url('//via.placeholder.com/350x150');

  background-size: cover;

  background-position: center;

  /* Or, use the background shortcut. */

  background: url('//via.placeholder.com/350x150') center/cover;

  margin: 20px;

  border: 1px solid rgba(0, 0, 0, 0.3);

}

.background-1 {

  width: 300px;

  height: 200px;

}

.background-2 {

  width: 200px;

  height: 50px;

}

.background-3 {

  width: 100px;

  height: 200px;

}

<div class="background-1"></div>

<div class="background-2"></div>

<div class="background-3"></div>

How to make background picture maintain aspect ratio?

You can achieve it by setting background-size

.background {
    height: 100%;
    width: 100%;
    background: url("https://dl.dropboxusercontent.com/s/er5sypbyluenzco/Its%20ok.jpeg");
  background-size:100% 100%; /*this one*/

}

How can I keep aspect ratio of background-image in css

I don't know if I might be getting the question wrong, but I don't understand why you want to use background images?

If you use a regular img-Tag, the image will keep its aspect ratio if you set it to
width: 90%
height: auto

Other than that you can keep the aspect ratio of a div-container by setting a padding-top to a percentage on a wrapper-div. That works because the percentage is calculated dependend on the width of the div. See more here: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Background Image Scaling While Maintaining Aspect Ratio

You can't, at least not like you are trying to now.

What you can do, however, is create an <img> instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden

example: http://jsfiddle.net/GHmz7/4/

Force an image to fit and keep aspect ratio

You can try CSS3 object-fit, and see browser support tables.

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside
its box. object-fit options include "contain" (fit according to aspect
ratio), "fill" (stretches object to fill) and "cover" (overflows box
but maintains ratio), where object-position allows the object to be
repositioned like background-image does.

JSFIDDLE DEMO

.container {

  width: 200px; /*any size*/

  height: 200px; /*any size*/

}

.object-fit-cover {

  width: 100%;

  height: 100%;

  object-fit: cover; /*magic*/

}

<div class="container">

  <img class="object-fit-cover" src="https://i.stack.imgur.com/UJ3pb.jpg">

</div>

Maintain aspect ratio of background-image

As I saw that you are already using jQuery, so I assume that you are open to jQuery solution, because, as I read your comment which says

I want to center the background-image if the viewport size exceeds
the original image size, and if it's equal to or less than the real
size, than you want a responsive background

So here, I am using jQuery to detect the windows height and width and accordingly am resizing your background-image

Demo

$(window).on('resize', function() {
    if($(window).width() < 300) { //original idth of your background image
        $('div.fotowind').css('background-size', '100% auto');
    } else if($(window).height() < 300) { //original height of your background image
        $('div.fotowind').css('background-size', 'auto 100%');
    } else {
        $('div.fotowind').css('background-size', 'auto');
    }
});

---

There is no CSS solution as such because we don't have max-width and max-height for background-size so if you are looking for a pure CSS solution, than you will need an absolute positioned img tag, with max-height and max-width defined with a z-index set to negative, but still you will face some issues regarding the element center positioning...

---

After you commented, you said that the images will be dynamic in dimensions, and the container will be fixed so..

Here, now the code is completely compatible with your fixed width container elements.. you need to do nothing now and it's completely dynamic, also thanks to this answer which helped me to fetch the height and width of the image

$(document).on('ready', function() {
    var image_url = $('div.fotowind').css('background-image'), image;

    // Remove url() or in case of Chrome url("")
    image_url = image_url.match(/^url\("?(.+?)"?\)$/);

    if (image_url[1]) {
        image_url = image_url[1];
        image = new Image();
        image.src = image_url;
    }

    // just in case it is not already loaded
    $(image).load(function () {
        imgwidth = image.width;
        imgheight = image.height;

        if($('div.fotowind').width() < imgwidth) {
            $('div.fotowind').css('background-size', '100% auto');
        } else if($('div.fotowind').height() < imgheight) {
            $('div.fotowind').css('background-size', 'auto 100%');
        } else {
            $('div.fotowind').css('background-size', 'auto');
        }
    });
});

Few demos to illustrate the above code in action...

Demo 1 (Where image size > than the elements size)

Demo 2 (Where container size > image size)

Demo 3 (Where image height > container height)

Demo 4 (Where image height > container height [2])

Demo 5 (Where image width > container width)

---

Related Topics