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>
...