El cuadro delimitador es aproximadamente 1000x600, y algunas imágenes son 500x100, , mientras que algunas otras son 400x100 (ejemplos extremos). Ahora me gustaría escalar tanto hasta el tamaño máximo que el cuadro delimitador es capaz de manejar , pero mantenerlos a escala.Escala la imagen con css a la anchura y la altura a escala
img {
width: 100%;
height: 100%;
}
No mantendrá la imagen a escala.
Puede establecer solo el ancho o solo la altura al 100%. P.ej.
img {
width: 100%;
}
o
img {
height: 100%;
}
que preservarán la escala de la imagen, pero la imagen podría desbordarse del recipiente.
Esto podría no funcionar en todos los navegadores, pero sí en las últimas versiones de Firefox, Chrome y Opera. He tenido experiencias extrañas con esto en el pasado y mi solución fue calcular el nuevo tamaño de imagen en el servidor.
No sé si hay una manera de hacer esto con solo CSS. Si usted quiere lograr algo así como this entonces puede utilizar supersized
Alternativamente, si no se preocupan por los navegadores más antiguos, se puede mirar en la background-size propiedad CSS3. Específicamente, creo que establecer background-size: cover hará el truco.
Editar - He entendido mal. Lo que realmente podría querer es background-size: contain, pero la desventaja es que probablemente tendrá que cambiar su marcado HTML, no solo su CSS.
Eso es exagerado. – Reactormonk
No puede hacerlo así. Puede editar width y height los atributos del elemento de imagen ...
<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" height="50" />
<!-- keeps width-height ratio -->
<img src="smiley.gif" alt="Smiley face" width="50" />
<!-- does not keep width-height ratio, unless your image is square -->
<img src="smiley.gif" alt="Smiley face" height="50" width="50" />
puede establecer el width y height a píxeles o ciento. Tenga en cuenta que no tiene que escribir px al usar píxeles, pero tiene que escribir % al hacer un porcentaje. Así que usted puede hacer algo como ...
<img src="smiley.gif" alt="Smiley face" height="100%" width="100%" />
... , sino que tendrá el 100% de la anchura y la altura del elemento padre. Así que asegúrese de saber cuál es el elemento padre y sus dimensiones.
Los atributos 'width' y' height' deben especificarse en píxeles CSS. Los porcentajes no son válidos. – steveax
sí lo son ... http://www.w3.org/TR/html4/struct/objects.html#adef- height-IMG: "Cuando el objeto es una imagen, se escala. Los agentes de usuario deben hacer todo lo posible para escalar un objeto o imagen para que coincida con el ancho y alto especificados por el autor. Tenga en cuenta que las longitudes expresadas como porcentajes se basan en la horizontal o espacio vertical actualmente disponible, no en el tamaño natural de la imagen, objeto o applet ". – Hristo
Creo que este artículo A List Apart puede ser de gran ayuda, analiza las imágenes receptivas que se adaptan a su contenedor, manteniendo la relación de aspecto.
Esencialmente solo necesita contener el <img> y especificar las dimensiones para ese contenedor que aplicar max-width:100% al <img> y se adaptará. Lea el resto del artículo para consideraciones obligatorias de IE (afortunadamente IE7 + lo admite).
Estaba teniendo dificultades con esto hasta que leí este hilo (resize view width, preserve image aspect ratio with CSS) y el artículo List Apart (http://alistapart.com/article/fluid-images) y lo puse todo junto.
Si su margen de beneficio es así ...
<img src="myImg.jpg" />
... entonces simplemente indicando
img {
width:100%
}
debería ser suficiente porque la mayoría de los navegadores modernos se dan cuenta de que la mayoría de la gente, les da a elegir, Don No quiero cambiar el aspecto de sus imágenes. Sin embargo, si su margen de beneficio contiene los atributos de dimensión como ...
<img src="myImg.jpg" width="400" height="400" />
... la cual, está destinado a ser una mejor técnica, a continuación, el marcado brillará a través de la CSS manteniendo la imagen a la altura fija, sino ancho flexible (urgh !) a menos que se diga lo contrario con algo como ...
img {
width:100%;
height:inherit;
}
... o ...
img {
width:100%;
height:auto;
}
Ambos parecen trabajar y obligar a la imagen de nuevo en aspecto correcta.
Me acabo de topar con este problema yo mismo (mi editor WYSIWIG agrega dims a las imágenes por defecto, necesitaba una solución simple o necesitaba pasar horas pirateando JCE para detener este comportamiento) y aún no lo he probado exhaustivamente pero debería darte un buen punto de partida si tienes el mismo problema que yo.
Esta debería ser la respuesta aceptada porque explica todo claramente y por qué funciona. – MetalPhoenix
ajuste sólo anchura o la altura no siempre funciona, por lo que también puede configurar:
img {
max-width: 100%;
max-height: 100%;
}
PERO
no se extenderá imágenes a través de su tamaño original
¿Estás preguntando cómo escala todas las imágenes al tamaño del contenedor, manteniendo la relación de aspecto? –
@JoshDavenport exactamente. – Reactormonk