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

5 minutos de lectura

avatar de usuario
silenciar

Quiero tener un sitio web donde pueda cargar imágenes de diferentes tamaños para que se muestren en un control deslizante de jquery. Parece que no puedo ajustar (reducir) la imagen en un div contenedor. Así es como tengo la intención de hacerlo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="https://stackoverflow.com/questions/18606473/Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

y el css

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

Intenté establecer el ancho máximo de mi imagen al 100% en CSS. Pero eso no funciona.

  • prueba #im img{ display:block; altura: 100%; width:100%;} ¡pero las imágenes pequeñas pueden verse mal…!

    – Vivek Vikranth

    4 de septiembre de 2013 a las 6:14

  • Que raro que digas ese ajuste max-width de la imagen al 100% no ayuda. funciona perfectamente.

    – usuario

    19 de marzo de 2014 a las 10:22


  • posible duplicado del cambio de tamaño automático de la imagen para que se ajuste al contenedor div

    – usuario

    19 de marzo de 2014 a las 10:25

Puedes usar un imagen de fondo para lograr esto;

Desde MDN – Tamaño de fondo: contener:

Esta palabra clave especifica que la imagen de fondo se debe escalar para que sea lo más grande posible mientras se asegura que ambas dimensiones sean menores o iguales a las dimensiones correspondientes del área de posicionamiento del fondo.

Manifestación

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML:

<div id="wrapper">
    <div id="im">
    </div>
</div>

  • Problema: la imagen de fondo no será compatible con SEO.

    – netalex

    25 mayo 2016 a las 10:37

avatar de usuario
Woody Payne

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

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

“MaxSize” es un marcador de posición para lo que sea max-width y max-height desea utilizar, en píxeles o porcentaje. auto aumentará (o disminuirá) el ancho y la altura para ocupar el espacio que especifique con MaxSize. Anulará los valores predeterminados para las imágenes que usted o el navegador del espectador puedan tener para las imágenes. Descubrí que es especialmente importante en Firefox de Android. Los píxeles o porcentajes funcionan para el tamaño máximo. Con la altura y el ancho establecidos en autose mantendrá la relación de aspecto de la imagen original.

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 max-widths a min-width: 100% – esto hará que ocupen completamente su espacio y mantengan la relación de aspecto. Puedes ver un ejemplo de esto con la imagen de fondo de un perfil de Twitter.

  • ¿Cómo es el soporte para MaxSize?

    – crmpicco

    22 de junio de 2015 a las 9:29

  • Eso es solo un marcador de posición para cualquier ancho máximo y alto máximo que desee usar, en píxeles o porcentaje (siempre que se establezca un ancho y alto en el padre).

    – Woody Payne

    30 de junio de 2015 a las 21:44

  • ¿Te importa expandir lo que no funciona en particular? Es difícil solucionar el problema de “eso no funciona” 🙂

    – Woody Payne

    6 de enero de 2016 a las 10:47

  • @WoodyPayne ¿Dónde pones estas líneas? Dentro de una div objeto o tienes que acceder al custom.css ¿expediente?

    – FaCoffee

    18 de mayo de 2017 a las 9:07


  • Agregue que configuró esto en el img sí mismo, no a su contenedor.

    – Talla

    8 mayo 2020 a las 15:21

si quieres tanto el ancho como la altura, puedes probar

 background-size: cover !important;

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

avatar de usuario
jose werner

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!

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

  • Esto no funcionará para imágenes con una relación de aspecto inferior a 1.

    – activadogeek

    18 de agosto de 2015 a las 5:37

  • Esto también aumenta la escala de las imágenes si el contenedor div es más grande que la imagen

    – Mike N.

    22 de enero de 2016 a las 12:43

avatar de usuario
Moonis Abidi

Espero que esto responda al antiguo problema. (Sin usar CSS antecedentes propiedad)

html

<div class="card-cont">
 <img src="https://stackoverflow.com/questions/18606473/demo.png" />
</div>

CSS

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

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

  • Esto no funcionará para imágenes con una relación de aspecto inferior a 1.

    – activadogeek

    18 de agosto de 2015 a las 5:37

  • Esto también aumenta la escala de las imágenes si el contenedor div es más grande que la imagen

    – Mike N.

    22 de enero de 2016 a las 12:43

avatar de usuario
flavio

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

¿Ha sido útil esta solución?