CSS reduce la escala de la imagen para que quepa en el div que contiene, sin especificar el tamaño original

Esta es una vieja pregunta que sé, pero está entre los cinco primeros para varias búsquedas relacionadas con Google. Aquí está la única solución CSS sin cambiar las imágenes a imágenes de fondo:

width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;

Auto aumentará (o disminuirá) el ancho y la altura para ocupar el espacio que especifique con MaxSize. Superará cualquier valor predeterminado para las imágenes que usted o el navegador del espectador puedan tener para las imágenes. He encontrado que es especialmente importante en Firefox de Android. Los píxeles o porcentajes funcionan para el tamaño máximo. Con tanto la altura como el ancho establecidos en auto la relación de aspecto de la imagen original se conservarán.

Si desea llenar el espacio por completo y no le importa que la imagen sea más grande que su tamaño original, cambie los dos anchos máximos a ancho mínimo: 100%, esto hará que ocupen completamente su espacio y mantengan la ración de aspecto. Puedes ver un ejemplo de esto con la imagen de fondo de un perfil de Twitter.

Si desea tanto el ancho como el alto, puede probar

 background-size: cover !important;

Pero esto no distorsionará la imagen, sino que llenará el div.

Es muy simple. Simplemente establezca el ancho de img en 100%

Creo que esta es la mejor manera de hacerlo, lo he probado y funciona muy bien.

#img {
  object-fit: cover;
}

Aquí es donde lo encontré . ¡Buena suerte!

Espero que esto responda al antiguo problema (Sin usar la propiedad CSS background)

Html

<div class="card-cont">
 <img src="demo.png" />
</div>

Css

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}

En una página web donde quería una imagen en escala con el cambio de tamaño del navegador y permanecer en la parte superior, junto a un div fijo, todo lo que tenía que hacer era usar una sola línea CSS: overflow:hidden; y funcionó. La imagen escala perfectamente.

Lo que es especialmente bueno es que esto es css puro y funcionará incluso si Javascript está desactivado.

CSS:

#ImageContainerDiv {
  overflow: hidden;
}

HTML:

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>

Estoy usando esto, tanto imágenes más pequeñas como grandes:

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

Varias de estas cosas no funcionaron para mí... sin embargo, esto sí. Podría ayudar a alguien más en el futuro. Aquí está el CSS:

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }

Utilizo:

Object-fit: cover;
-o-object-fit: cover;

Para colocar imágenes en un contenedor con una altura y un ancho fijos, esto también funciona muy bien para mis deslizadores. Sin embargo, cortará partes de la imagen dependiendo de ella.