Responsively resize div according to its background image height

Question

So, here the background-size of <main> element is contain, which cause it's container #main contains the space towards the bottom on lower screen sizes.

So, I wanted to resize the height of #main responsively according to <main>'s background-image height to remove the vertical gap in lower screen sizes.

Note that the background image shouldn't be stretched or hidden.

HTML

<div id="main">
    <main>

    </main>
</div>

CSS

#main{
    width: 100%;
    height: 70%;
}
main{
    max-width: 100%;
    height: 100%;
    background: url(images/img-main.png) no-repeat top center;
    background-size: contain;
}

JavaScript

var toHeight = $('main')//?????? I'm stacked here 
$('#main').css('height',toHeight);

Any ideas?

Here's the jsfiddle demo (resize the window to understand)

+--------------------------+--------
|                          |
|    background-image      |
|              height      |       main
|                          |
|                          |      height
+--------------------------+
|         vertical         |
|           gap            |
+--------------------------+---------

Should be converted to:

+--------------------------+--------
|                          |       main
|    background-image      |
|              height      |     height
|                          |
|                          | 
+--------------------------+----------

This may help: http://stackoverflow.com/questions/5106243/how-do-i-get-background-image-size-in-jquery?lq=1 — Hashem Qolami, Mar 12 '14 at 07:17
main's background-image height has allways the same size as main's height and if there is no padding and no margin, #main's height is equal too... I think your question or your problem isn't clear... — ReeCube, Mar 12 '14 at 07:18
JSFiddle with your situation to understand: http://jsfiddle.net/y7dmG/ — ReeCube, Mar 12 '14 at 07:19
@C-link Did you check my posted link? This question has already an answer: http://stackoverflow.com/a/18297940/1725764 — Hashem Qolami, Mar 12 '14 at 07:25
@HashemQolami please try to answer me taking my jsfiddle. I couldn't understand that. — Bhojendra Rauniyar, Mar 12 '14 at 07:28
As @HashemQolami mentioned, why not just use a normal `` tag instead of `background-image` in css? That way the parent div can scale according to the image size. — Praxis Ashelin, Mar 12 '14 at 08:03
That way too, not fine what I wanted. The image shouldn't be stretched or hidden. — Bhojendra Rauniyar, Mar 12 '14 at 08:07
@C-link The image won't be stretched or hidden even if you use the `` tag, unless you specifically put it in your css to stretch / hide it. — Praxis Ashelin, Mar 12 '14 at 08:14
@C-link Your update is still not clear. Please choose what you want to do: 1) I want the main div height to scale with the image height. 2) I want the image height to scale with the main div height. 3) I want to set the heights myself. — Praxis Ashelin, Mar 12 '14 at 09:01
@C-link Then either http://jsfiddle.net/wAJyv/6/ or http://jsfiddle.net/wAJyv/7/ should be the working option for you. — Praxis Ashelin, Mar 12 '14 at 09:05
you didn't have set height in main div. but I wanted to get the image height as per the main div height. — Bhojendra Rauniyar, Mar 12 '14 at 09:06
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/49541/discussion-between-dark-ashelin-and-c-link) — Praxis Ashelin, Mar 12 '14 at 09:07
@C-link I've updated my given answer to fit your needs. Please give it a try and let me know how it works. — Hashem Qolami, Mar 12 '14 at 18:16

Hashem Qolami · Accepted Answer · 2014-03-12T18:19:59.660

3

Updated Answer

Testing the old answer

During testing I found out that the old approach (creating an image element on the fly to get its dimensions) only works on latest versions of Chrome, Safari and Firefox but not IE. Thus it's not a cross browser method.

What the OP really wants

In addition, as per the OP's comments below, I figured it out that the OP wants the <main> element to be 70% of height of the browser. But Once the width of the <main> element reaches the edges of the background image by resizing the window horizontally, the height <main> element should be reduced to remove the vertical gap between the background image.

(That vertical gap happens because of using contain value for the background image to keep the image inside of the box and keeping the aspect ratio).

Considering that, and our failure to get the dimensions of the background image on-the-fly with a large scale of web browsers, you'll end up with the following:

var main = $('#main'),
    imgwidth  = 500,  // Set the width/height of the background image manually
    imgHeight = 300,
    imgRatio  = imgHeight/imgwidth,
    mainHeight   = main.height();

$(window).resize(function() {
  var mainWidth  = main.width(),
      mainRatio  = mainHeight/mainWidth;

  // Compare ratio of the <main> element and the background image
  if (mainRatio >= imgRatio) {
    main.height(imgRatio * mainWidth);
  } else {
    main.height('70%');
  }
}).resize(); // Trigger the handler once the script is loaded

WORKING DEMO.

The old Answer ^{(Under a misconception)}

There's no pure CSS way to resize an element's dimensions according to its background-image.

You'll need to use JavaScript to achieve that. By using JavaScript we get the computed background-image and create an image element (using the background image) on the fly to get the dimensions of the background image

Here you go:

<div class="wrap">
    <main id="main"></main>
    <div>another div</div>
</div>

_{I've combined two #main and <main> elements to condense the markup in this particulat instance.}

jQuery version:

var
    main = $('#main'),
    imgSrc = main.css('background-image').slice(4, -1);

$('<img />')
    .attr('src', imgSrc)
    .on('load', function() {
        main.height(this.height);
    });

WORKING DEMO.

edited Mar 12 '14 at 18:19

answered Mar 12 '14 at 07:42

Hashem Qolami

97,268
26
150
164

It's not working. See by resizing! – Bhojendra Rauniyar Mar 12 '14 at 07:47
You are targeting to img tag but I think it should be main tag. – Bhojendra Rauniyar Mar 12 '14 at 07:50
@C-link `I wanted to set the #main's height according to main's background-image height.` That was my assumption. *background-image height* is fixed in px units. – Hashem Qolami Mar 12 '14 at 07:52
Yeah, then you are right but when you reisze to small then you'll see bottom space there. – Bhojendra Rauniyar Mar 12 '14 at 07:53
There's something wrong. Please carefully see your code. – Bhojendra Rauniyar Mar 12 '14 at 07:55
@C-link That's because of `background-size: contain;`. You could change that to `background-size: auto 100%;` to fit the height. – Hashem Qolami Mar 12 '14 at 07:55
No, I must use contain to get picture's visibility without stretch and without hidden. – Bhojendra Rauniyar Mar 12 '14 at 07:58
@C-link Sorry, but I don't understand what exactly you want. I'll be appreciated if you could update the question to add more details. – Hashem Qolami Mar 12 '14 at 08:00
you should see the demo in my question by resizing the window to small then you'll see the gap there. and the image is not stretched. That's what I want but without the space. clear? – Bhojendra Rauniyar Mar 12 '14 at 08:02
If you place auto 100% then the image part will be hidden. That I don't want. – Bhojendra Rauniyar Mar 12 '14 at 08:06
@C-link Ok, I think I've got it. let me update the fiddle. – Hashem Qolami Mar 12 '14 at 08:07
@C-link Please check this **[updated demo](http://jsfiddle.net/hashem/wAJyv/5/)** Is this what you're looking for? – Hashem Qolami Mar 12 '14 at 08:20
not, still space the yellow background.. – Bhojendra Rauniyar Mar 12 '14 at 08:27
@C-link Is this what you are looking for? http://jsfiddle.net/wAJyv/7/ (see my answer) – Praxis Ashelin Mar 12 '14 at 08:32
@DarkAshelin I'm trying your method but not working as height is set in percentage. – Bhojendra Rauniyar Mar 12 '14 at 08:34
You either set your own height (in %) or let it be resized by the image. You can't have both. You can choose a `min-height` if that's what you want. – Praxis Ashelin Mar 12 '14 at 08:35
@DarkAshelin I tried your method is working perfectly. thanks. I'll accept your answer if it's not possible with background image. – Bhojendra Rauniyar Mar 12 '14 at 08:36
@DarkAshelin But sorry, it's not setting image height. – Bhojendra Rauniyar Mar 12 '14 at 08:40
@C-link Can you be more detailed? I don't understand you. – Praxis Ashelin Mar 12 '14 at 08:40
@DarkAshelin see this http://jsfiddle.net/wAJyv/8/ main height is set to 70%; and thus image height should be accordingly. – Bhojendra Rauniyar Mar 12 '14 at 08:46
@C-link I think you should make up your mind and think deeply what you really want and what is logically **possible**. You can't have the main div height scale according to img size, and at the same time have img scale according to main div height, and at the same time choose the height by yourself. Think logically. It sounds like you want both a circle and a square (metaphor) – Praxis Ashelin Mar 12 '14 at 08:51
Please check my update that would be clear? – Bhojendra Rauniyar Mar 12 '14 at 08:57
@C-link I've updated the **[demo](http://jsbin.com/yuxav/1/edit)** please give it a try. – Hashem Qolami Mar 12 '14 at 09:00
@HashemQolami It's now hiding the image as you are using auto 100%. – Bhojendra Rauniyar Mar 12 '14 at 09:02
then the space i.e. yellow part in your demo is not removed that is the main's height is not set. – Bhojendra Rauniyar Mar 12 '14 at 09:05
@C-link I withdrew my last comment, But still using `auto 100%` doesn't hide the background image as I'm handling the scale of the main element by javascript. Please replace your own image into the demo to verfy that. – Hashem Qolami Mar 12 '14 at 09:07
nope. it's hiding you can see by resizing – Bhojendra Rauniyar Mar 12 '14 at 09:07
Discussion has been moved to chat: http://chat.stackoverflow.com/rooms/49541/discussion-between-dark-ashelin-and-c-link – Praxis Ashelin Mar 12 '14 at 09:09
Thank you very much. That's what I was willing to get. – Bhojendra Rauniyar Mar 13 '14 at 03:04

Praxis Ashelin · Answer 2 · 2014-03-12T08:31:03.760

You can do this by simply using an <img> tag instead of the background-image attribute:

HTML

<div class="wrap">
    <div id="main">
        <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRqHMio3jll2W62WXJHbufc-xxYPxec_ip8Ez0lQv2P7Umy2kPKrw">
    </div>
    <div>another div</div>
</div>

CSS

#main{
    width: 100%;
    height: auto;
    border: 1px solid red;
    text-align: center;
}

img{
    max-width: 100%;
    vertical-align: middle; //prevents a default bottom margin from appearing
}

Fiddle: http://jsfiddle.net/wAJyv/6/ (try resizing)

Edit: Alternatively, if you want the image to be scaled upwards too incase the main div is wider, you can simply use width: 100% instead of max-width: 100%: http://jsfiddle.net/wAJyv/7/

score 0 · Answer 3 · edited Mar 12 '14 at 08:35

0

give background-size: 100% 100%; in the css of .main than contain.

.main {
    background-size: 100% 100%;
}

edited Mar 12 '14 at 08:35

Ashley Medway

7,151
7
49
71

answered Mar 12 '14 at 07:48

rk rk

314
1
8

that stretches the image. – Bhojendra Rauniyar Mar 12 '14 at 07:48