Estoy mostrando una imagen cuyas proporciones la hacen cuadrada de la siguiente manera:
.form_photo {
position: relative;
border-radius: 50%;
width: 150px;
height: 150px;
border: 1px solid #cecece;
}
<img src='http://placehold.it/150x150' border='0' class='form_photo' />
Como pueden ver, se presenta una imagen que da la sensación de encontrarse dentro de un círculo, todo va bien pero cuando es una imagen vertical (cuyas proporciones hacen rectangular) la imagen se deforma.
¿Cómo puedo hacer con CSS que la imagen conserve sus proporciones y que a su vez quepa en el círculo o por el contrario muestre solo la parte que alcance en el círculo pero sin deformarse?
Me refiero a lo que se conoce como aspect fill o aspect fit.
background-size:cover
. Tengo que mirar, pero estoy casi seguro que esta pregunta es un duplicado.