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