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

Question

Apr 25, 2013, 04:23 PM

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

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

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="icons">
            <div id="contact">
                <img src="img/icon_contact.png" alt="" />
            </div>
            <img src="img/icon_links.png" alt="" />
        </div>
    </body>
</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 básicamente tener un diseño de pantalla completa (conbackground-size: cover) y tienediv los elementos deben estar exactamente en la misma posición (% sabio) al cambiar el tamaño de la ventana del navegador, con su tamaño también cambiar el tamaño (comocover está haciendo para el fondo)?