J'essaie de faire une barre NAV latérale composée de 7 images d'icône. J'ai toutes les images enveloppées dans un div, mais je veux qu'ils soient réactifs si la fenêtre du navigateur rétrécit (hauteur). Voici ce que j'ai jusqu'à présent,
HTML: P>
body {
margin: 0;
padding: 0;
}
body, html {
height: 100%;
}
#nav1 img, #nav2 img, #nav3 img, #nav4 img, #nav5 img, #nav6 img, #nav7 img {
width: 100px;
}
#sidenav {
position: fixed;
}
4 Réponses :
Aussi loin que je sache, cela ne peut pas être fait avec CSS seul.
p>
<div id="sidenav"> <div id="nav1"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav2"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav3"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav4"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav5"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav6"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> <div id="nav7"><img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260" alt=""></div> </div>
Je vous suggère d'essayer une bibliothèque de bootstrap, c'est une très bonne bibliothèque réactive avec des tonnes de superbes goodies.
Voici mon code à l'aide de bootstrap: p>
p>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
<div class="col-md-12">
<img src="https://via.placeholder.com/1000" alt="" class="img-fluid">
</div>
</div>
</div>Vous pouvez utiliser des points d'arrêt multimédia pour styler vos icônes pour une hauteur de fenêtre spéciale
p>
<body>
<div id="sidenav">
<div id="nav1" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301804.svg" alt=""></div>
<div id="nav2" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301805.svg" alt=""></div>
<div id="nav3" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301814.svg" alt=""></div>
<div id="nav4" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301808.svg" alt=""></div>
<div id="nav5" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301812.svg" alt=""></div>
<div id="nav6" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301809.svg" alt=""></div>
<div id="nav7" class="nav-icon"><img src="https://image.flaticon.com/icons/svg/1301/1301817.svg" alt=""></div>
</div>
</body>Eh bien, j'ai réellement accompli ceci sur ma page (super excité de répondre vraiment à ma première question).
Alors, ce qui a été divisé l'écran par le nombre d'icônes et obtenu une position pour chaque icône. Pour le mien, j'ai 5 et j'ai aussi besoin du sommet pour d'autres choses. Donc, après avoir joué un peu à la positionnement, j'ai décidé que je voulais environ 17% de VH pour chacune de la chambre à gauche. Vous en avez 7, donc je démarrerais probablement environ 14% VH (100/7 = ~ 14.2) pour placer, ce qui donne à chaque icône, c'est son propre identifiant CSS et une classe pour gérer toutes les images. Donc, pour le vôtre, je ferais à peu près la même chose. Pour le garder carré, vous devrez utiliser VH pour la hauteur et la largeur. (VH représente la hauteur de la fenêtre, de sorte que la fenêtre de vue fonctionne.) espère que cela fonctionne pour vous. En espérant avoir une réponse de première question.