Estoy tratando de replicar el mismo efecto que tiene este sitio web: http://www.knockknockfactory.com/
Cuando se redimensiona el ancho del navegador la imagen automáticamente se hace más pequeña pero la altura del área que ocupa se mantiene igual.
Cuando intento replicar esto, mi imagen también se hace más pequeña pero la altura cambia?
Mi código hasta ahora es:
<div id="image"><img src="cover.png" /></div>
CSS:
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
¿Cómo puedo hacer que mi imagen disminuya / aumente al cambiar el tamaño del navegador, pero aún así mantener la misma altura usando CSS como en ese sitio web?
I've utilizado Perfect Full Page Background Image para lograr esto en un sitio anterior.
Puede utilizar background-size: cover; si sólo necesita soportar navegadores modernos.
Usted debe aprender acerca de las consultas de medios para CSS. El sitio al que te refieres está usando lo mismo. El sitio está utilizando básicamente el CSS diferente cada vez que el tamaño de la ventana del navegador es changining. Aquí's el enlace para muestras
La página web que has enlazado no cambia la anchura de la imagen, sino que la corta. Para ello es necesario establecer como una imagen de fondo.
Para más información sobre background-image
mira en http://www.w3schools.com/cssref/pr_background-image.asp
Uso:
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}