web-dev-qa-db-fra.com

Comment redimensionner l'image automatiquement avec le navigateur, redimensionner en largeur sans changer de hauteur?

J'essaie de reproduire le même effet que ce site a: http://www.knockknockfactory.com/

Lorsque la largeur du navigateur est redimensionnée, l'image devient automatiquement plus petite mais la hauteur de la zone dans laquelle elle occupe reste la même.

Lorsque j'essaie de reproduire cela, mon image devient également plus petite mais la hauteur change?

Mon code jusqu'ici est:

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

img { 
    max-width: 100%; 
    height: auto; 
}

Comment puis-je obtenir que mon image diminue/augmente après le redimensionnement du navigateur tout en conservant la même hauteur en utilisant CSS comme sur ce site? 

htmlcssimageresize
9
Ned

J'ai utilisé Image d'arrière-plan Perfect Full Page pour accomplir cela sur un site précédent.

Vous pouvez utiliser background-size: cover; si vous avez seulement besoin de supporter les navigateurs modernes.

4
Jeremy Gallant

C'est une vieille question, mais je tiens à ajouter que si vous souhaitez redimensionner l'image en fonction de la taille de la fenêtre d'affichage uniquement avec css; vous pouvez utiliser les unités de fenêtre "vh (hauteur de la fenêtre) ou vw (largeur de la fenêtre)".

.img {
width: 100vw;
height: 100vh;
}

Voir les supports de navigateur

2
eren130

Comme vous avez du mal à régler la hauteur, vous pourrez peut-être utiliser ceci . http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

Je ne sais pas exactement à quelle taille ni à quel endroit vous mettez vos images, mais peut-être que cela vous aidera!

2
Matt

Faites-en une image d'arrière-plan et supérieure à 100% pour obtenir l'effet souhaité: http://jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}
1
Derek Story

Le site Web que vous avez lié ne modifie pas la largeur de l'image, mais le coupe effectivement. Pour cela, il doit être défini comme image d’arrière-plan.

Pour plus d'informations sur background-image, consultez http://www.w3schools.com/cssref/pr_background-image.asp

Usage:

#divID {
    background-image:url(image_url);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
0
Mohammad Areeb Siddiqui

changer la largeur de l'image changera automatiquement la hauteur ...

combien de photos voulez-vous avoir cette fonctionnalité? Si c'est beaucoup et qu'ils ont tous des hauteurs différentes, vous devriez probablement laisser la hauteur changer également.

Disons que vous avez 5 images qui ont une hauteur de 400px, dans votre HTML donnez à ces cinq balises la classe de fixe

.fixed { width: 100%; height: 500px !important }

Cela devrait laisser la largeur changer mais garder la hauteur la même.

0
bob

Vous devriez en savoir plus sur les requêtes de média pour CSS. Le site auquel vous faites référence utilise le même. Le site utilise fondamentalement les différents CSS chaque fois que la taille de la fenêtre du navigateur change. Voici le lien pour les exemples 

http://css-tricks.com/css-media-queries/

0
vendettamit