Image responsive
Résolu
Maitre2B
Messages postés
391
Statut
Membre
-
Maitre2B Messages postés 391 Statut Membre -
Maitre2B Messages postés 391 Statut Membre -
Bonjour à tous,
Je suis entrain de créer un site web et je voulais savoir comment reproduire l'accueil de ce site : http://www.philiphousenyc.com/
C'est à dire, avoir un menu fixé à gauche d'environ 400pixels et que le reste de l'écran soit totalement rempli par une image.
j'ai crée une classe pour faire une image qui prend l'espace restant:
.img-responsive {
max-width: 78.8%;
margin-left: 400px;
}
mais ça ne fonctionne pas parfaitement...
Si je laisse 78,8% en largeur, la hauteur est un peu trop longue, du coup il y a l'ascenseur.
Si je mets 100% en max-witdh, ça déborder en largeur et longueur, c'est donc encore pire :/
Quelqu'un aurait une idée pour qu'une image remplisse tout l'espace restant en largeur et longueur lorsqu'il y a déjà un menu de 400px de largeur à gauche ?
Je suis entrain de créer un site web et je voulais savoir comment reproduire l'accueil de ce site : http://www.philiphousenyc.com/
C'est à dire, avoir un menu fixé à gauche d'environ 400pixels et que le reste de l'écran soit totalement rempli par une image.
j'ai crée une classe pour faire une image qui prend l'espace restant:
.img-responsive {
max-width: 78.8%;
margin-left: 400px;
}
mais ça ne fonctionne pas parfaitement...
Si je laisse 78,8% en largeur, la hauteur est un peu trop longue, du coup il y a l'ascenseur.
Si je mets 100% en max-witdh, ça déborder en largeur et longueur, c'est donc encore pire :/
Quelqu'un aurait une idée pour qu'une image remplisse tout l'espace restant en largeur et longueur lorsqu'il y a déjà un menu de 400px de largeur à gauche ?
2 réponses
-
sur le site en exemple c'est fait avec du Jquery (si on désactive javascript l'image ne s'affiche pas)
voici par exemple quelques plugin jquery qui font ca
https://www.lafermeduweb.net
https://jquery-plugins.net/tag/image-resize
https://code.google.com/archive/p/jquery-imagefit-plugin
etc
-
Salut,
Tu peux utiliser la propriété css background-size pour faire cela :
CSS#espace_restant {
background: url('/images/exemple.jpg') no-repeat;
background-size: cover;
margin-left: 400px;
}
HTML<div id="espace_restant"></div>
Bonne journée
