scale a div's height proportionally to its width using CSS

You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the parent element.

CSS:

.imageContainer {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    float: left;
    height: 0;
}

img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
}

For details, see this article on the subject http://wemadeyoulook.at/en/blog/proportional-scaling-responsive-boxes-using-just-css/

Margin vs Padding

Margin is an element’s personal space — how much distance the element wants to keep with other elements around it.

Padding is how much an element is away from itself — how much distance an element wants to keep with the elements inside it.

They both are used to create gaps around elements, but they differ in their method of creating that gap. Margin accommodates the gap by pushing adjacent elements away from it, while Padding accommodates the gap by either growing its own size or by shrinking the size of content inside it.

By default, padding will increase the size of the element to accommodate the gap. But if you set “box-sizing: border-box” on the element, then it will shrink the size of the content inside the element to accommodate the gap.

Use padding when:

• You don’t want your content to touch the edges of the container. Example: you have a bunch of <p> elements inside a div and you don’t want the text inside <p> elements to touch the div’s border:

• You want the background of the element to be displayed in the produced gap.Example: you have a green and an orange div adjacent to each other, and you want both divs to touch each other, but don’t want their texts to touch each other:

• You want to increase the size of the element. Example: if you want to increase the size of a button:

Use margin when:

• You want to have some space around an element, or you don’t want the element to touch other elements around it:

• You want to center an element. If you give “margin: auto” to an element with fixed width, it will center that element horizontally (and vertically too if using flexbox, check this tutorial if you are new to Flexbox):

Hope this helps.

CSS Units

CSS Units

CSS has several different units for expressing a length.

Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.

Length is a number followed by a length unit, such as 10px, 2em, etc.

A whitespace cannot appear between the number and the unit. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units: absolute and relative.

---

Absolute Lengths

The absolute length units are fixed and a length expressed in any of these will appear as exactly that size.

Absolute length units are not recommended for use on screen, because screen sizes vary so much. However, they can be used if the output medium is known, such as for print layout.

Unit	Description
cm	centimetersTry it
mm	millimetersTry it
in	inches (1in = 96px = 2.54cm)Try it
px *	pixels (1px = 1/96th of 1in)Try it
pt	points (1pt = 1/72 of 1in)Try it
pc	picas (1pc = 12 pt)Try it

* Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

---

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	Try it
ex	Relative to the x-height of the current font (rarely used)	Try it
ch	Relative to width of the "0" (zero)	Try it
rem	Relative to font-size of the root element	Try it
vw	Relative to 1% of the width of the viewport*	Try it
vh	Relative to 1% of the height of the viewport*	Try it
vmin	Relative to 1% of viewport's* smaller dimension	Try it
vmax	Relative to 1% of viewport's* larger dimension	Try it
%	Relative to the parent element	Try it