CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Liam
Liam

Reputation: 9855

Scaling div size with background image whilst keeping aspect ratio

Come a bit unstuck here.

I've got a div thats approx. 2000px wide by 800px tall.

Inside that div I have another div, with a background image.

I want the internal div, to take 80% height of the parent container, and for the width to keep proportion with the height, so the background image doesn't distort, if this makes sense?

Im using CSS3 to scale the background image 100% both x and y. 

.internal-box {
    background:url(images/elevator.png) repeat scroll 0 0 transparent;
    background-size:100% 100%;
    height: 80%;
    width: auto;
}

http://jsfiddle.net/JbmE6/

Upvotes: 1

Views: 5078

Answers (1)

leftclickben
leftclickben

Reputation: 4614

Try this:

background-size: contain;
background-repeat: no-repeat;

However note that this might not be fully supported in all browsers such as IE8.

Also note that this doesn't make the <div> itself any smaller, it only makes the background image appear in only the relevant portion. If you put a border on .small you will see in fact it is 100% width of its container.

Upvotes: 5

Related Questions