Estoy mostrando una imagen cuyas proporciones la hacen cuadrada de la siguiente manera:
img src='../../imagenes/contactos/grande/noimagen.jpg' border='0' class='form_photo'
Esta es la clase:
.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' />
form_photo { position: relative; border-radius: 50%; width: 150px; height: 150px; border: 1px solid #cecece; }
Como pueden ver, se presenta una imagen que da la sensación de encontrarse dentro de un circulocírculo, todo va bien pero cuando es una imagen vertical (cuyas proporciones hacen rectangular) deforma la imagen se deforma.
Como¿Cómo puedo hacer con CSS que la imagen conserve sus proporciones y que a su vez quepa en el circulocírculo o por el contrario muestre solo la parte que alcance en el circulocírculo pero sin deformarse?
Me refiero a lo que se conoce como aspect fill o aspect fit.
Muchas gracias de antemano por su generosa ayuda