Skip to main content
Publicación cerrada como "Duplicada" por Francisco Romero, JuankGlezz, ComunidadBot
Formato de código + correcciones de ortografía + etiquetado
Origen Enlace
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

Como Cómo presentar imágenes sin que se deformen

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

Como presentar imágenes sin que se deformen

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; }

Como pueden ver se presenta una imagen que da la sensación de encontrarse dentro de un circulo, todo va bien pero cuando es una imagen vertical (cuyas proporciones hacen rectangular) deforma la imagen.

Como puedo hacer con CSS que la imagen conserve sus proporciones y que a su vez quepa en el circulo o por el contrario muestre solo la parte que alcance en el circulo pero sin deformarse?

Me refiero a lo que se conoce como aspect fill o aspect fit.

Muchas gracias de antemano por su generosa ayuda

Cómo presentar imágenes sin que se deformen

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.

Origen Enlace
Pillo
  • 246
  • 2
  • 11

Como presentar imágenes sin que se deformen

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; }

Como pueden ver se presenta una imagen que da la sensación de encontrarse dentro de un circulo, todo va bien pero cuando es una imagen vertical (cuyas proporciones hacen rectangular) deforma la imagen.

Como puedo hacer con CSS que la imagen conserve sus proporciones y que a su vez quepa en el circulo o por el contrario muestre solo la parte que alcance en el circulo pero sin deformarse?

Me refiero a lo que se conoce como aspect fill o aspect fit.

Muchas gracias de antemano por su generosa ayuda