Scale background image of div to a fixed width; auto-scale height

Question

Similar to CSS background image to fit width, height should auto-scale in proportion, I want to scale an image to a fixed width, with an unlimited height.

Unlike that question though, this is for a <div>, not the <body>, which seems to introduce issues.

I've tried using the CSS3 property background-size: cover, but that shows 2 images like this (correct width but not tall enough):

I've also tried using background-size: contain, but that shows like this (not wide enough, therefore not tall enough):

I'm trying to get the images to look like this:

Here's a JSFiddle I've setup.

How can I get the <div>'s to be 171px wide, but also auto-scale the height?

The dimensions of the images are not known. The images must come in the format <div style="background-image: url('base64')">, (not <img src="base64"> - due to a restriction on the CLI program it is forwarded to) but I can modify any other HTML or CSS.

I have also tried using JavaScript to calculate what the height should be. That works good, but the <div>'s are not actually resized at the end:

var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++)
{
    var img = new Image();
    img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
    var ratio = img.width / 171;
    var height = Math.floor(img.height / ratio);
    alert(height);
    divs[i].height = height;
}

Here's an updated JSFiddle with the JavaScript.

Danny Beckett · Answer 1 · 2013-07-18T06:15:19.877

I've got it working with the JS option. I just needed to use divs[i].style.height = height + 'px' instead of divs[i].height = height:

window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
        var ratio = img.width / 171;
        var height = Math.floor(img.height / ratio);
        divs[i].style.height = height + 'px';
    }
}

Here's a working JSFiddle.

I'm still interested to know whether this is possible with pure CSS3 though. You'd think so!

I've further improved the code. Now, images that are smaller than 171px wide are not stretched:

window.onload = function()
{
    var divs = document.getElementsByTagName('div');
    for(var i = 0; i < divs.length; i++)
    {
        var img = new Image();
        img.src = divs[i].style.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');

        if(img.width > 170)
        {
            var ratio = img.width / 171;
            var height = Math.floor(img.height / ratio);
        }

        else
        {
            var height = img.height;
            divs[i].style.backgroundSize = 'auto';
            divs[i].style.backgroundPosition = 'center';
        }

        divs[i].style.height = height + 'px';
    }
}

Here's the final Fiddle.

score -1 · Answer 2 · answered Jul 18 '13 at 05:49

-1

Any reason you can't add <img src='base64'/> inside the div elements then in the css have div{background: 0px 0px} to hide the div background and have img{width:171px}? See the modified jsFiddle. That solves the problem, but not sure if you are able to add the img tag. Let me know and i'll see if another solution can be found.

answered Jul 18 '13 at 05:49

gaara42

112
1
2

This is what I meant by "the images *must* come in that format". Unfortunately I have to use a `background-image`. The HTML file is sent to a command-line tool to convert it to PDF. It doesn't like ``s unfortunately, and only works to use `background-image`s. – Danny Beckett Jul 18 '13 at 05:51
please clarify your question **before** down-voting, as that detail was not in the original post. thanks. – gaara42 Jul 18 '13 at 14:57
I already said this before. Check the last sentence of [revision 1](http://stackoverflow.com/posts/17715201/revisions). Also, just to let you know, deleting your answer will actually *increase* your reputation, since it has a negative score. – Danny Beckett Jul 18 '13 at 17:03

score -1 · Answer 3 · answered Jul 18 '13 at 05:50

-1

.divname img {
    height: auto;
    width: 171px;

}

And then for html do this:

    <div class="divname"><img src="image.jpg"></div>

answered Jul 18 '13 at 05:50

Mercifies

152
1
13

I cannot use `` tags for the reason explained on the other answer. – Danny Beckett Jul 18 '13 at 05:51
Then just add background-image: url(''); in front of the height and width – Mercifies Jul 18 '13 at 05:55

Scale background image of div to a fixed width; auto-scale height

3 Answers3