vendredi 3 avril 2015

cropping an image in css, maintaining aspect ratio and centered

Fitting a image into a div and maintaining the aspect ratio isn't that hard. But trying to keep the selected area in the center of an image is the hardest part. What happens is that the image will zoom out to the top-left, while I want it to stay in the center, because people often take pictures where the biggest attraction is in the center of a photo.


This is the code I use now:



.cover-photo {
width: auto;
height: 60vh;

background-color: lightgray;

position: relative;
margin: 60px 0 0 0; //There is a header above this div

overflow: hidden;
background: url('../Img/cover_photo.jpg') no-repeat center center;
background-size: cover;}

Aucun commentaire:

Enregistrer un commentaire