Haga que el ancho de la imagen sea 100% del div principal, pero no mayor que su propio ancho

125

Estoy tratando de hacer que una imagen (colocada dinámicamente, sin restricciones en las dimensiones) sea tan ancha como su división principal, pero solo mientras ese ancho no sea más ancho que su propio ancho al 100%. He intentado esto, en vano:

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

Muchas de estas imágenes son mucho más anchas que su división principal, por lo que me gustaría que cambien de tamaño en consecuencia, pero cuando aparece una pequeña imagen y se amplía más allá de sus dimensiones normales, realmente se ve terrible. ¿Hay alguna forma de hacer esto?

html width css

— Alfonso
fuente

55

¿Qué sucede si solo especificas max-width: 100%?

— Fyodor Soikin

@Fyodor Soikin: da eso como respuesta y votaré por ti.

— Gert Grenander

Sin embargo, sería bueno considerar qué navegadores admiten max-width.

— kbrimington

kbrimington trae un buen punto a la mesa. De acuerdo con reference.sitepoint.com/css/max-width#compatibilitysection, la implementación de IE8 tiene errores.

— Alfonso

221

Solo especifique max-width: 100%solo, eso debería hacerlo.

— Fyodor Soikin
fuente

1

El cromo parece simplemente dejarlo al 100% independientemente del contexto. Quizás debería dejar de mirar constantemente mi trabajo en el software beta. ¡Gracias!

— Alfonso

¿Cómo haces esto sin usar max-width: 100%? En React-Native, no es posible usar porcentajes.

— Croolsby

@Croolsby puede usar el porcentaje en react-native, pero con un valor de cadena, como este '100%'

— Rafael Hovsepyan

9

Encontré esta publicación en una búsqueda en Google y resolvió mi problema gracias a la respuesta de @jwal, pero hice una adición a su solución.

img.content.x700 {
  width: auto !important; /*override the width below*/
  width: 100%;
  max-width: 678px;
  float: left;
  clear: both;
}

Con lo anterior, cambié el ancho máximo a las dimensiones del contenedor de contenido en el que se encuentra mi imagen. En este caso es: ancho del contenedor - relleno - borde = ancho máximo

De esta manera, mi imagen no saldrá del div que contiene, y todavía puedo flotar la imagen dentro del div de contenido.

He probado en IE 9, FireFox 18.0.2 y Chrome 25.0.1364.97, Safari iOS y parece funcionar.

Adicional: probé esto en una imagen de 1024px de ancho que se muestra a 678px (el ancho máximo), y una imagen de 500px de ancho que se muestra a 500px (ancho de la imagen).

— mattauckland
fuente

1

El uso width:auto !important;solucionó un problema en IE11 para mí donde la imagen sería más grande que su contenedor y IE11 no reduciría la imagen. Establecer esto en el imgselector solucionó el problema en IE11. Sin embargo, la configuración width:100%;sin la otra regla no hizo nada en IE11. Por lo tanto, se debe incluir la "anulación" para que la imagen se reduzca al tamaño de su contenedor.

— lowtechsun

3

Establecer un ancho del 100% es el ancho completo del div en el que se encuentra, no la imagen original de tamaño completo. No hay forma de hacerlo sin JavaScript o algún otro lenguaje de script que pueda medir la imagen. Si puede tener un ancho fijo o una altura fija del div (como 200px de ancho), entonces no debería ser demasiado difícil darle a la imagen un rango para llenar. Pero si coloca una imagen de 20x20 píxeles en un cuadro de 200x300 píxeles, seguirá distorsionada.

— Amanda
fuente

1

proporcione un ejemplo de trabajo siempre que sea posible. Esto es recomendable :)

— bhb

1

En estilo de línea: esto me funciona siempre

<div class="imgWrapper">
    <img src="/theImg.jpg" style="max-width: 100%">
</div>

— Nelles
fuente

0

Debe establecer el ancho máximo y, si lo desea, también puede establecer algo de relleno en uno de los lados. En mi caso, el ancho máximo: 100% era bueno, pero la imagen estaba justo al final de la pantalla.

  max-width: 100%;
  padding-right: 30px;
  /*add more paddings if needed*/

— Combinar
fuente

0

También estaba teniendo el mismo problema, pero configuré el valor de altura en mi CSS como automático y eso solucionó mi problema. Además, no olvide hacer la propiedad de visualización.

  #image {
      height: auto;
      width: auto;
      max-height: 550px;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
      display: block;
 }

— Noah Franco
fuente

solo para su información ... puede eliminar la altura: auto y el ancho: auto. max-height y max-width es lo mismo.

— Debbie Kurth

0

Encontré una respuesta que funcionó para mí y se puede encontrar en el siguiente enlace:

Contenedores de ancho completo en padres de ancho limitado

— Inscripción
fuente

-1

Si la imagen es más pequeña que la principal ...

.img_100 {
  width: 100%;
}

— SandroMarques
fuente

-4

Usaría la propiedad display: table-cell

Aqui esta el enlace

— allsyed
fuente