Image responsive

Résolu
Maitre2B Messages postés 341 Date d'inscription   Statut Membre Dernière intervention   -  
Maitre2B Messages postés 341 Date d'inscription   Statut Membre Dernière intervention   -
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 2829 Date d'inscription   Statut Membre Dernière intervention   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 2826 Date d'inscription   Statut Membre Dernière intervention   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 341 Date d'inscription   Statut Membre Dernière intervention   33
 
Merci beaucoup Pitet !
0