para adaptarse div

Question

Quiero escalar la imagen para que entre la clase principal div

http://jsfiddle.net/EyW99/

Lo sentimos, se olvidó de mencionar que lo necesito para trabajar en IE8

Answer 1

Puede utilizar el background-size:contain propiedad de CSS.

.image { 
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat; 
    width: 100%; 
    height: 100%; 
    background-size: contain; 
} 

Si tiene que soportar los navegadores antiguos (es decir, IE en Windows XP y por debajo, ya que Vista y 7 usuarios debe estar en IE9), utilizar una etiqueta <img> lugar, ya que esto hace que el navegador para escalar la imagen a las dimensiones que especifique en altura/ancho de CSS o los atributos HTML de la etiqueta.

<img class="image" src="http://astridterese.files.wordpress.com/2010/07/google.jpg" />

Answer 2

Aquí es una versión actualizada del violín que hace uso de la propiedad CSS3 background-size: http://jsfiddle.net/EyW99/2/

Lo que hay que añadir a su estilo es básicamente background-size: contain; para hacer la escala navegador la imagen para el tamaño más grande posible de la imagen que aún se ajusta dentro de su elemento, o background-size:X% X%; o background-size:Xpx Xpx; si desea controlar el tamaño usted mismo.

Nota

Como telón de fondo de tamaño es una propiedad CSS 3, se ha limitado el apoyo del navegador.

IE9 +, Firefox 4+, Opera, Chrome y Safari 5+.

soultion Cross-browser

Esta solución es quizás no tan "bueno" como el nuevo CSS-propiedad, pero para el soporte multi-navegador que podría cambiar su div a un img, lo que permitirá el navegador para cambiar el tamaño de la imagen.

Answer 3

.main{ 
    height: 113px; 
    max-width: 400px; 
} 

.image { 
    background: url('http://astridterese.files.wordpress.com/2010/07/google.jpg') no-repeat scroll 0 0 transparent; 
    background-size: 100% 100%; 
} 

Eso funciona en Chrome pero no en IE8, por lo que probablemente sea inútil.

Personalmente, cambiaría el div interno a una etiqueta de imagen con su ancho y alto establecidos en 100%.

Answer 4

Si no necesita una solución de CSS puro, puede usar JavaScript para una solución que funcione en todos los navegadores principales. El complemento bgStretcher para jQuery hará lo que quiera y ajustará el tamaño dinámicamente si cambia el tamaño del div.