Scaling elements like an image

Question

When I for example have an image in :

<img src="10px_image.png" alt="Some image" style="width: 100%" />

Its height automatically gets scaled according to width the image gets (you can see that when you resize the browser window for example). Is there any way to do the same with other elements in html ?

Answer 1

Solution #1

You could use the new css viewport units vw, vh etc to pull this off.

FIDDLE

div
{
    width: 40vw;
    height: 20vw;
    background: pink;
}

CSS3 has some new values for sizing things relative to the current viewport size: vw, vh, and vmin. One unit on any of the three values is 1% of the viewport axis. "Viewport" == browser window size == window object. If the viewport is 40cm wide, 1vw == 0.4cm.

1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger (css-tricks post)

Support: IE 9+, Firefox 19+, Chrome 20+, Safari 6+

Reference: w3c, mozilla

---

Solution #2

FIDDLE

Markup

<div class="container">
    <div class="outer r4x3">
        <div class="inner">
        </div>
    </div>
</div>

CSS

/* container defines margins and width */
.container {
    margin: 60px 120px 0;
}

/* outer container will define aspect ratio */
.outer {
    position: relative;
    width: 100%;
}

.outer.r4x3 {
    padding-top: 75%; /* "height" will be 3/4 of width */
}
/* inner container positioned absolutely and holds content */
.outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    outline: 1px solid grey;
    background: pink;
}