Redimensionar automáticamente las imágenes con el tamaño del navegador usando CSS

Quiero que todas (o solo algunas) de mis imágenes cambien de tamaño automáticamente cuando cambie el tamaño de la ventana de mi navegador. He encontrado el siguiente código, aunque no hace nada.

HTML

        

CSS

 body { font-family: Arial; font-size: 11px; color: #ffffff; background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed; background-size: cover; } #icons { position: absolute; bottom: 22%; right: 8%; width: 400px; height: 80px; z-index: 8; transform: rotate(-57deg); -ms-transform: rotate(-57deg); -webkit-transform: rotate(-57deg); -moz-transform: rotate(-57deg); } #contact { float: left; cursor: pointer; } img { max-width: 100%; height: auto; } 

¿Cómo puedo tener básicamente un diseño de pantalla completa (con background-size: cover pantalla background-size: cover ) y tener elementos div exactamente en la misma posición (% sabia) al cambiar el tamaño de la ventana del navegador, con su tamaño también cambiando el tamaño (como la cover está haciendo para el fondo) ?

Para hacer que las imágenes sean flexibles, simplemente agregue max-width:100% y height:auto . max-width:100% imagen max-width:100% y height:auto funciona en IE7, pero no en IE8 (sí, otro error raro de IE). Para solucionar esto, necesita agregar width:auto\9 para IE8.

fuente: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

por ejemplo :

 img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } 

y luego cualquier imagen que agregue simplemente usando la etiqueta img será flexible

JSFiddle ejemplo aquí. No se requiere JavaScript Funciona en las últimas versiones de Chrome, Firefox e IE (que es todo lo que he probado).

contenedor de imagen

Escalar imágenes usando el truco anterior solo funciona si el contenedor en el que están las imágenes cambia de tamaño.

El contenedor #icons utiliza valores de px para el ancho y alto. px valores de px no se escalan cuando se cambia el tamaño del navegador.

Soluciones

Use uno de los siguientes enfoques:

  1. Defina el ancho y / o alto usando % values.
  2. Use una serie de consultas @media para establecer el ancho y el alto en diferentes valores según el tamaño de pantalla actual.

Esto puede ser una respuesta demasiado simplista (todavía soy nuevo aquí), pero lo que he hecho en el pasado para remediar esta situación es averiguar el porcentaje de la pantalla que me gustaría que tome la imagen. Por ejemplo, hay una página web en la que estoy trabajando en la que el logotipo debe ocupar el 30% del tamaño de la pantalla para que se vea mejor. Jugué y finalmente probé este código y me ha funcionado hasta ahora:

 img { width:30%; height:auto; } 

Dicho esto, esto cambiará todas las imágenes para que sean el 30% del tamaño de la pantalla en todo momento. Para evitar este problema, simplemente conviértalo en una clase y aplíquelo a la imagen que desea que sea al 30% directamente. Aquí hay un ejemplo del código que escribí para lograr esto en el sitio mencionado anteriormente:

la porción de CSS:

 .logo { position:absolute; right:25%; top:0px; width:30%; height:auto; } 

la porción de HTML:

  

Alternativamente, podría colocar cualquier imagen que espere cambiar automáticamente el tamaño en un div propio y usar la opción de etiqueta de clase en cada div (creando ahora tags de clase cuando sea necesario), pero siento que eso ocasionaría mucho trabajo extra eventualmente. Pero, si el sitio lo requiere: el sitio lo requiere.

Espero que esto ayude. ¡Que tengas un gran día!

Lo siguiente funciona en todos los navegadores para mis 200 figuras, para cualquier porcentaje de ancho, a pesar de ser ilegal. Jukka dijo ‘Úselo de todos modos’. (La clase simplemente flota la imagen hacia la izquierda o hacia la derecha y establece los márgenes.) ¡No puedo imaginar por qué este no es el enfoque estándar!

 Schematic models of chromosomes ... 

Cambie el ancho de la ventana y la imagen se escalar amablemente.