10

I need to present images in a container using the CSS property background-image

The problem here is that I need to present every image keeping the aspect ratio of it, and maximize the presentation of the image to the height or width of the image centered inside the container.

HTML:

<div class="fotowind shadow"></div>

EDIT:

Initial CSS properties of the .fotowind container:

.fotowind {
    overflow:hidden;
    margin-left:10px;
    background:#333;
    margin-bottom:5px;
    z-index:30;
    background-position: center center !important;
    background-repeat: no-repeat;
}

Code to build the properties dynamically based in the size of the window - I need to resize the image keeping the ratio, even of some empty space as to remain on the sides:

jQuery:

windowWidth = $(window).width();
windowHeight = $(window).height();

if (windowWidth <= 1200 && windowWidth > 768 || windowHeight < 900)
{
    $('.fotowind').css('width', '650px').css('height', '425px');
}
else if (windowWidth > 1200 || windowHeight > 900)
{
    $('.fotowind').css('width', '950px').css('height', '650px');
}

if (windowWidth <= 768)
{
    $('.fotowind').css('width', '450px').css('height', '425px');
}

Resulting HTML:

<div class="fotowind shadow" style="background-image: url(http://localhost/AdPictures/25/2c/c2/4c/-9/77/1-/4b/77/-b/ff/a-/57/e5/10/2b/31/b1/7516_1_xl.jpg); background-size: 100%; width: 950px; height: 650px; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>

In some situations where an image has size 800x600, for example, I can't present it with this size, or when the image has 200x650, for example, it deforms to the container size.

Example

Community
  • 1
  • 1
Patrick
  • 2,995
  • 14
  • 64
  • 125

3 Answers3

8

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)

Community
  • 1
  • 1
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
6

You can use background-size: cover

body {
  margin: 0
}
.fotowind {
  background: url(//placehold.it/400) fixed no-repeat center / cover;
  min-height: 100vh /*demo purposes*/
  
}
<div class="fotowind shadow">&nbsp;</div>

See more info on this article

dippas
  • 58,591
  • 15
  • 114
  • 126
  • Hi thanks, but I want to keep the original height and width of the image – Patrick Mar 22 '14 at 01:06
  • so you want the div .fotowind to be dynamic according to the width/height of each image? – dippas Mar 22 '14 at 01:13
  • the fotowind is static and I want to present the image centered inside of it, with its original height and width if it's smaller then the fotowind, or resized maintaining the aspect ratio of the image covering the all fotowind area – Patrick Mar 22 '14 at 01:17
  • @Patrick check this fiddle and see if this is what you want: http://jsfiddle.net/D6Nd8/1/ sorry I'm not fully understanding what you trying to achieve here. – dippas Mar 22 '14 at 01:33
  • 1
    Hi, thank you for the example. Just to be more clear based on your example, I want to show the image completely, but when the background size area is bigger then the size of the image, then the image will remain to it's maximum size centered in the background's container area. – Patrick Mar 22 '14 at 15:31
  • I have put an example of the behavior of the image vs background container. – Patrick Mar 22 '14 at 15:51
  • Perfection. Is there anyway we can change the css version of the browser? – aspiring May 19 '15 at 02:40
  • @aspiring I dont understand your doubt/ question. – dippas May 19 '15 at 02:47
  • My css keeps showing errors, coz certain tags don't support in 2.1 but 3 or higher... So is there a way to change it to the higher version? – aspiring May 19 '15 at 03:03
  • you are talking about validation? validate here [W3C CSS Validator](https://jigsaw.w3.org/css-validator/) – dippas May 19 '15 at 03:10
3

I tried to propose two different solution, one with a background-image and the other one with an image tag.
Here is the code:

HTML

<div class="container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG" alt="foo" />
  <div class="bg"></div>
  <div class="bg bg_h_s"></div>
  <div class="bg bg_h_m"></div>
  <div class="bg bg_h_l"></div>
  <div class="bg bg_w_s"></div>
  <div class="bg bg_w_m"></div>
  <div class="bg bg_w_l"></div>
</div>

CSS

.container {
  text-align: center;
  background-color: grey;
}

.bg {
  background: url(https://upload.wikimedia.org/wikipedia/commons/e/e2/Mei_Foo_Station_2.JPG) no-repeat center center blue;
  -webkit-background-size: contain;
  background-size: contain;
  height: 480px
}

img, .bg {
  width:100%;
  max-width:640px;
  margin: 30px auto;
}

.bg_h_s {
  height:100px;
}

.bg_h_m {
  height:200px;
}

.bg_h_l {
  height:300px;
}

.bg_w_s {
  width:200px;
}

.bg_w_m {
  width:400px;
}

.bg_w_m {
  width:600px;
}

Here is the working codepen

pasine
  • 11,311
  • 10
  • 49
  • 81
  • Hi thanks, but the image has to resize to the height and width of the container. Check my example and you will see that the image gets smaller when the height of the container gets smaller. – Patrick Mar 24 '14 at 10:13
  • 1
    Hi thanks for your help, but I have choose Mr. Alien's solution because it's working and it's very flexible. – Patrick Mar 24 '14 at 16:32
  • I found that the "background-size: contain" declaration was the key for fixing a similar issue that I was having. Thanks! – apritch May 11 '16 at 00:43