28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley smile et un grand merci à ceux qui pourront prendre 5 minutes pour me faire avancer Smiley confused

Je cherche à positionner et dimensionner précisément un bloc (cnt) par dessus une partie d'une image de taille variable lors du redimensionnement (hauteur à 100% du browser, largeur auto) et à centrer horizontalement le tout sur la page.

Pour cela je pensais :

- Placer l'image dans un div container configuré pour prendre la hauteur du navigateur et la largeur de son contenu (relative + inline-block + height:100%).

- Faire hériter mon bloc "Cnt" de ce "Container" (absolute) afin que le positionnement Left / Top / Width / Height puisse se faire en % de l'image.

Malheureusement, le div container semble s'adapter lors du chargement mais pas lors du redimensionnement du navigateur Smiley rolleyes (ou plutot il s'adapte en largeur OU en hauteur selon son Display, mais pas les deux), du coup le bloc à positionner ne se redimensionne pas correctement

Il me semble avoir essayé toutes les combinaisons de Display / Position possible sur chacun des éléments sans succès.

Quelle autre approche puis-je envisager sachant que mon image ne doit pas être ni déformée ni rognée ? Smiley ohwell

Encore une fois merci Smiley cligne

Le lien ci-dessous permet de mieux comprendre le problème par un redimensionnement de l'afficheur :

http://codepen.io/LaDent/pen/maxIv
Modifié par LaDent (25 Apr 2014 - 00:06)
en donnant une largeur de 100% aussi a ton image tout rentre dans l'ordre, mais est ce pour un soucis de compatibility que tu integre une image dans le html u lieu de la mettre en fond ?
http://codepen.io/anon/pen/BezFv ./silyk
Modifié par gc-nomade (24 Apr 2014 - 21:13)
En fait pas tout à fait, j'ai besoin que le redimensionnement se fasse sans dans déformer et sans rogner l'image. Smiley confused

I'image n'est pas en background puisque le but est justement d'adapter les dimensions du div contenu aux dimensions de l'image (pour masquer toujours la même partie de l'image, dans l'exemple la partie blanche, quel que soit le redimensionnement ) Smiley confus
wow je ne connaissait même pas d'existance des vh & vw ! Smiley biggrin

Après une recherche rapide leur prise en charge par les browsers est relativement récente.

Il est aussi fait mention dans un post daté de février un bug sous chrome lors du redimensionnement :
http://www.developpez.net/forums/d1413419/webmasters-developpement-web/css/css3-compatibilite-descendante-unite-mesure-vw-vers-em/

Cela fonctionne parfaitement chez moi avec Chrome 34 & I.E 11 : Donc un énorme merci, sujet résolu ! Smiley lol

je relancerai au besoin s'il y a trop d’incompatibilités Smiley biggol