CSS: Bilderhöhe dynamisch an Breite anpassen

In diesem Beitrag zeige ich Ihnen, wie Sie die Höhe eines Bildes dynamisch an die Breite anpassen. Dies klappt ganz einfach mit zwei Klassen.

Hier finden Sie den CSS Teil:

.ip_image
{
	position: relative;
	width: 100%;
}

.ip_image:before{
	content: "";
	display: block;
	padding-top: 100%;
	border-radius: 100%;
	background-size: cover;
}

.ip_image_content{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

img.pimage
{
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	border-radius: 100%;
	background-size: cover;
	border: 2px solid #454545;
}

Der obere Teil ist in zwei Parts aufgeteilt, einmal die beiden Container, und das Bild.

Hier ist der HTML Teil dann zum Einbinden:

...
<div class="ip_image">
								<div class="ip_img">
									<div class="ip_image_content">
										<img class="pimage" src="img/uploads/cimg3.png">
									</div>
								</div>
							</div>
...