Haz un ancho de imagen del 100% de div principal, pero no más grande que su propio ancho

Estoy intentando que una imagen (colocada dinámicamente, sin restricciones de dimensiones) sea tan ancha como su div principal, pero solo como siempre que ese ancho no sea más ancho que su propio ancho al 100%. He intentado esto, pero en vano:Haz un ancho de imagen del 100% de div principal, pero no más grande que su propio ancho

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

Muchas de estas imágenes son la forma más ancho que su div padre, por lo que me gustaría que cambiar el tamaño en consecuencia, pero cuando una pequeña imagen aparece allí y se amplía más allá de sus dimensiones normales, realmente se ve terrible. ¿Hay alguna forma de hacer esto?

Fuente

2010-08-11 Alfonso

¿Qué pasa si sólo se especifica 'max-width: 100 % '? –

@Fyodor Soikin: dale eso como respuesta y te votaré. –

Sin embargo, sería bueno considerar qué navegadores admiten ancho máximo. – kbrimington

146

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

Fuente

2010-08-11 23:47:43

Chromium parece simplemente dejarlo al 100% independientemente del contexto. Tal vez debería dejar de mirar constantemente mi trabajo en el software beta. ¡Gracias! – Alfonso

Esto no parece no funcionar en Firefox. –

El establecimiento de un ancho del 100% es el ancho completo del div en el que se encuentra, no la imagen original en tamaño completo. No hay forma de hacerlo sin JavaScript u otro lenguaje de scripting 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 de darle a la imagen un rango para llenar. Pero si coloca una imagen de 20x20 píxeles en una caja de 200x300 píxeles, seguirá distorsionándose.

Fuente

2012-07-17 16:46:41 Amanda

proporcione un ejemplo de trabajo siempre que sea posible. [Este] (http://jsfiddle.net/) es recomendado. :) – bhb

^oh la ironía =] – ahnbizcad

Encontré esta publicación en una búsqueda de Google, y resolvió mi problema gracias a @jwal reply, 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 he cambiado el ancho máximo de las dimensiones del contenedor de contenido que mi imagen se encuentra en En este caso es: Ancho de contenedores - acolchado - frontera = anchura máxima

esta manera. mi imagen no saldrá del div que contiene, y aún 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 que funciona.

Adicional: Probé esto en una imagen de 1024 px de ancho mostrada a 678 px (el ancho máximo) y una imagen de 500 px de ancho en 500 px (ancho de la imagen).

Fuente

2013-03-06 14:03:17 mattauckland

Usando 'width: auto! Important;' solucionó un problema en IE11 donde la imagen sería más grande que su contenedor e IE11 no reducía la imagen. Configurar esto en el selector 'img' ordenó el problema en IE11. Sin embargo, establecer '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 del contenedor. – lowtechsun

Si la imagen es más pequeño que los padres ...

.img_100 { 
    width: 100%; 
}

Fuente

2016-12-09 14:32:24 SandroMarques

me gustaría utilizar la propiedad display: table-cell

Aquí es el link

Fuente

2017-03-22 05:01:18 allsyed

Haz un ancho de imagen del 100% de div principal, pero no más grande que su propio ancho

Respuesta

Cuestiones relacionadas