1

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.

2
  • Lo que buscas es background-size:cover. Tengo que mirar, pero estoy casi seguro que esta pregunta es un duplicado.
    – Alvaro Montoro
    el 4 abr. 2017 a las 23:38
  • Esta pregunta tiene respuesta aquí, aquí o aquí (entre otros)
    – Alvaro Montoro
    el 4 abr. 2017 a las 23:45

1 respuesta 1

1

Ya te ha pasado Álvaro unos enlaces que te podrán servir, tendrás que hacer lo siguiente:

  1. cambiar tu html para usar un div al que ponerle la imagen de fondo
  2. Usa background-size: cover para que te cubra tus 150x150 px, y además background-position: center para que quede centrada independientemente del tamaño y proporción.

.form_photo {
  background-image: url(http://placehold.it/450x250);
  background-position: center; 
  background-size: cover;
  border-radius: 50%;
  width: 150px;
  height: 150px;
  border: 1px solid #cecece;
}
<div class='form_photo'></div>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.