Image responsive Résolu/Fermé

Question

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 ?
 
Configuration: Windows 7 / Firefox 12.0

animostab · Answer

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

Pitet · Answer

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

Bonne journée

Image responsive

2 réponses

Discussions similaires