html - tamaño - ¿Cómo ajusto una imagen(img) dentro de un div y mantengo la relación de aspecto?

hacer que una imagen se adapte a un div

Question

Tengo un div 48x48 y dentro de él hay un elemento img, quiero ajustarlo en el div sin perder ninguna parte, mientras tanto se mantiene la proporción, ¿es posible usar html y css?

Answer 1

HTML

<div>
    <img src="something.jpg" alt="" />
</div>

CSS

div {
   width: 48px;
   height: 48px;
}

div img {
   display: block;
   width: 100%;
}

Esto hará que la imagen se expanda para llenar su elemento principal, cuyo tamaño se establece en el div CSS.

Answer 2

Estaba teniendo muchos problemas para que funcionara, cada solución que encontré no parecía funcionar.

Me di cuenta de que tenía que configurar la pantalla de div para flexionar, así que básicamente este es mi CSS:

div{
display: flex;
}

div img{ 
max-height: 100%;
max-width: 100%;
}

Answer 3

Establecer la foto como una imagen de fondo nos dará más control sobre el tamaño y la ubicación, dejando la etiqueta img para servir a un propósito diferente ...

A continuación, si queremos que div sea la misma relación de aspecto que la foto, placeholder.png es una pequeña imagen transparente con la misma relación de aspecto que photo.jpg. Si la foto es un cuadrado, es un marcador de 1px x 1px, si la foto es una miniatura de video, es un marcador de 16x9, etc.

Específico a la pregunta, use un marcador de posición de 1x1 para mantener la proporción del cuadrado de div, con una imagen de background-size con background-size para mantener la relación de aspecto de la foto.

Utilicé background-position: center center; entonces la foto estará centrada en el div. (Alinear la foto en el centro o fondo vertical se pondría feo con la foto en la etiqueta img).

div {
    background: url(photo.jpg) center center no-repeat;
    background-size: contain;
    width: 48px; // or a % in responsive layout
}
img {
    width: 100%;
}

<div><img src="placeholder.png"/></div>

Para evitar una solicitud HTTP adicional, convierta la imagen del marcador de posición en una URL de datos:

<img src="data:image/png;base64,..."/>

Answer 4

Lamentablemente, max-width + max-height no cubren por completo mi tarea ... Así que he encontrado otra solución:

Para guardar la relación de Imagen durante la escala, también puede usar la propiedad de object-fit CSS3.

Artículo útil: Controle las relaciones de aspecto de la imagen con CSS3

img {
    width: 100%; /* or any custom size */
    height: 100%; 
    object-fit: contain;
}

Malas noticias: IE no es compatible ( puedo usar )

Answer 5

Necesitará un poco de JavaScript para evitar el recorte si no conoce la dimensión de la imagen en el momento de escribir el css.

HTML y JavaScript

<div id="container">
    <img src="something.jpg" alt="" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById(''container'').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = ''100%'';
        img.width = ''auto'';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

Si usa una biblioteca JavaScript, puede aprovecharla.

Answer 6

Para mí, el siguiente CSS funcionó (probado en Chrome, Firefox y Safari).

Hay varias cosas trabajando juntas:

• max-height: 100%; , max-width: 100%; y height: auto; , width: auto; hacer que la escala img sea la que primero alcance el 100% manteniendo la relación de aspecto
• position: relative; en el contenedor y la position: absolute; en el niño junto con la top: 50%; y a la left: 50%; centrar la esquina superior izquierda de la img en el contenedor
• transform: translate(-50%, -50%); mueve el img hacia la izquierda y hacia arriba a la mitad de su tamaño, centrando así el img en el contenedor

CSS:

.container {
    height: 48px;
    width: 48px;

    position: relative;
}

.container > img {
    max-height: 100%;
    max-width: 100%;
    height: auto;
    width: auto;

    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

Answer 7

Usando CSS solamente:

div > img {
  width: auto;
  height : auto;
  max-height: 100%;
  max-width: 100%;
}

Answer 8

Usar max-height:100%; max-width:100%; max-height:100%; max-width:100%; para la imagen dentro de div.

Answer 9

puede usar la clase "img-fluid" para la versión más reciente, es decir, Bootstrap v4 .

y puede usar la clase "img-responsive" para versiones anteriores como Bootstrap v3 .

Uso : -

img tag con: -

class = "img-fluid"

src = "..."