HTML automático de la imagen cambiar el tamaño de píxel y el uso de restricciones por ciento

Question

¿Cómo puedo añadir que una imagen a una página HTML usando las siguientes limitaciones:

• Sin escalado permitido (si el ancho de la imagen es de 400 píxeles que no quieren cambiar el tamaño a 600).
• La imagen debe reducirse si el elemento que lo contiene es más pequeño que la imagen.
• Mantener la relación de aspecto.

Por ejemplo, tengo una imagen (400x300). Si el elemento contenedor tiene 600 píxeles de ancho, me gustaría mostrar la imagen a 400x300. Si el elemento contenedor tiene 200 píxeles de ancho (por ejemplo, es un navegador móvil), me gustaría mostrar la imagen a 200x150.

Estoy buscando una solución de CSS pura (si es posible) sin cablear el tamaño de la imagen.

Answer 1

Uso la propiedad de ancho máximo dos veces funciona correctamente:

<div style="max-width: 400px" > 
<img src="image.jpg" style="max-width:100%;" /> 
</div> 

Answer 2

Se debe utilizar la propiedad max-width:

<div style="width:600px"> 
<img src="images/image.jpg" alt="image" style="max-width:100%;/>  
</div> 

Esto limitará el ancho de la imagen para el elemento div padre, escalando la imagen hacia abajo si es necesario. No perderá su relación de aspecto o escalará una imagen. de ancho máximo es compatible con todos los navegadores hasta la fecha, pero no en IE6

Answer 3

No bajo escala de la imagen. - asalamon74

I enchufado código de adamy en mi HTML y lo hace reducir la escala de la imagen. Aquí hay algunas muestras de las dimensiones de la imagen que tengo: 800w x 626h, 962x640, 895x640. Para estos y otros, los escalaron todos correctamente, lo que significa que después de agregar 'style =' max-width: 100%; '' a la etiqueta img, las imágenes se ajustan al ancho de mi contenedor (# photo-container) y son escala. No digo que funcionará en tu código, pero funcionó para mí. Aquí está mi correspondiente código CSS/HTML:

CSS:

#photo-container {display:block; float:left; width: 800px; 
        margin-left:5px; margin-top:0px; 
        padding: 10px 10px 10px 10px; 
        background-color:black; color:white; 
        border-bottom-left-radius: 0.5em; 
        border-bottom-right-radius: 0.5em; 
       } 

HTML:

<div id="photo-container"> 
     <img id="photo-display" src="PlaceHolder" alt="PlaceHolder" 
     style="max-width:100%;"> 
    </div> 

Las imágenes se colocan en realidad el uso de JavaScript. El proceso de selección en mi código Javascript es un poco más detallado de este tema, pero en esencia es igual a:

photo-display.src=myimage; 

Yo no lo he probado con una foto con una anchura que es menor que 800.

Answer 4

Cabe señalar que la etiqueta IMG tiene que tener la propiedad Alto ancho & eliminado, de lo contrario no se escala correctamente.

Answer 5

Por etiqueta < img> sin usar div boxes etc.

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