Image responsive

Résolu
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 ?

A voir également:

2 réponses

animostab Messages postés 3003 Statut Membre 738
 
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




0
Pitet Messages postés 2845 Statut Membre 527
 
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
0
Maitre2B Messages postés 391 Statut Membre 33
 
Merci beaucoup Pitet !
0