Código
<html> <body> <style> #Bloque_div{ width:100%; overflow:auto; } #Bloque_div img{ width:500px; } @media (max-width: 720px) { #Bloque_div{ width:720px;border:blue solid 1px; } #Bloque_div img{ width:200px; float:left;} } @media (max-width: 420px) { #Bloque_div{ width:420px;border:red solid 1px; } #Bloque_div img{ width:100px; float:right;} } </style>
Código
lo que estoy diciendo es
a mi div le doy el 100% de ancho, y overflow:auto, para que crezca el height, y a la imagen interna solo 500px
cuando el tamaño del navegador/pantalla sea maximo 720px
el div cambiara del ancho a 720 y se coloreara el borde en azul...
la imagen tomara el tamaño de 200px y se colocara en el lado izquierdo...
si el tamaño del navegador/pantalla sigue decrementando y llega maximo 420px
el div cambiara del ancho a 420 y se coloreara el borde en rojo...
la imagen tomara el tamaño de 100px y se colocara en el lado derecho...
y asi puedes ir dando los estilos que desees...
saludos!