CSS, HTML und Javascript mit {stil}

CSS padding für Boxen mit festem Seitenverhältnis

CSS padding

Einem HTML-Block eine feste Größe zuzuweisen – z.B. für ein Hintergrundbild – ist einfach. Aber da wäre noch die Darstellung auf kleinen und großen Monitoren, also das responsive Design.

Eine feste Größe funktioniert da nur für kleine Boxen. An dieser Stelle springt padding ein. padding hat ein paar Nebenwirkungen, die nicht intuitiv sind und aus dem Rahmen fallen, die aber genau bei diesem Problem helfen.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

CSS padding – mal nicht in Pixeln, EMS oder REM

padding-top und padding-bottom stellen das padding in der vertikalen Richtung ein. Wenn padding mit Prozent-Werten notiert wird, berechnen es sich nicht aus der Breite des Elements, sondern aus der Breite des des Elternelements.

mandarin-oranges
Mandarinen

Auch wenn das Bild ein anderes Seitenverhältnis hat, lässt es sich mit einem Seitenverhältnis 16:7 einsetzen.

Nur das padding zählt

padding zählt mit zur Breite und/oder Höhe. Ein Block, der 800px breit und 0px hoch ist, aber ein padding von 20% hat, hat also ein Platzangebot von 160px.

Hat der Block in einem kleineren ViewPort eine Breite von nur noch 400px, ist sein Platzangebot 400px Breite und 80px Höhe. 

<div class="wrapper-16-7">
	<div class="inner-box"></div>
</div>

.wrapper-16-7 {
	position: relative;
	height: 0; 
	padding-top:calc(7/16 * 100%); 
}

.inner-box {
	position: absolute;
	top:0;left:0;
	width: 100%; height:100%; 
	background-image:url(mandarinen.jpg); 
	background-size:cover;
	box-sizing:border-box;
}