Redimensionnement d'une image en deuxième position inline-block
Fermé
fleure_inline
Messages postés
5
Date d'inscription
samedi 21 juin 2014
Statut
Membre
Dernière intervention
3 octobre 2017
-
21 juin 2014 à 19:52
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 22 juin 2014 à 11:00
inspiring Messages postés 1813 Date d'inscription vendredi 28 janvier 2011 Statut Membre Dernière intervention 31 décembre 2018 - 22 juin 2014 à 11:00
A voir également:
- Redimensionnement d'une image en deuxième position inline-block
- Deuxieme ecran pc - Guide
- Image iso - Guide
- Deuxième compte whatsapp - Guide
- Ma position - Guide
- Créer un deuxième compte facebook - Guide
1 réponse
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
22 juin 2014 à 11:00
22 juin 2014 à 11:00
Bonjour,
1er point, le codage est faux :
ce serait plutot :
et pour le CSS :
je ne comprend l'utilité du background-attachement puisque la regle concerne un élément image qui n'a pas de background puisqu'on ne met pas un background dans un element image mais à l'élément qui l'englobe (comme un div ou un span)
Si une regle dimensionne les images à 300px de largeur, elle feront toutes 300px
Il y a un gros travail de maitrise du css a faire :)
en corrigé, ce sera plutot :
Là, les 2 image sont cote à cote
Je souhaiterais en plus la formule exacte pour redimensionner une image en deuxième ou troisième position pour pouvoir continuer la présentation de ma page.
pour ce faire, utilisation de la pseudo class est nth-child(le nombre)
en exemple :
mieux vaut déjà maitriser le CSS avant de jouer avec les pseudo-classe
le plus simple est simplement d'assigner des class propre à chaque élément, comme .image1, image2, image3, etc...
voilà voilà
1er point, le codage est faux :
<header>< img src="images/logo.jpg"/> <span class="images/image2.jpg"/> < img src="images/image2.jpg"/> </span>< /header>
ce serait plutot :
<header>< img src="images/logo.jpg"/> <span class="image2"/> < img src="images/image2.jpg"/> </span>< /header>
et pour le CSS :
img { display:inline-block; width:300px; height:300px; margin-top:0px; margin-left:0px; background-attachment:fixed;}
span.image2 { display:inline-block; width:700px; height:300px; border:1px solid gray; margin-left:0px; margin-top:0px;}.
je ne comprend l'utilité du background-attachement puisque la regle concerne un élément image qui n'a pas de background puisqu'on ne met pas un background dans un element image mais à l'élément qui l'englobe (comme un div ou un span)
Si une regle dimensionne les images à 300px de largeur, elle feront toutes 300px
Il y a un gros travail de maitrise du css a faire :)
en corrigé, ce sera plutot :
<header> <div class="image1"> < img src="images/logo.jpg"/> </div> <div class="image2"/> < img src="images/image2.jpg"/> </div> < /header>
img { max-width:100%}
.image1 { display:inline-block; width:300px; height:300px; margin-top:0px; margin-left:0px;}
.image2 { display:inline-block; width:700px; height:300px; border:1px solid gray; margin-left:0px; margin-top:0px;}
Là, les 2 image sont cote à cote
Je souhaiterais en plus la formule exacte pour redimensionner une image en deuxième ou troisième position pour pouvoir continuer la présentation de ma page.
pour ce faire, utilisation de la pseudo class est nth-child(le nombre)
en exemple :
p {background:#91c225;}
p:nth-child(2) {background:#ff0000;}
mieux vaut déjà maitriser le CSS avant de jouer avec les pseudo-classe
le plus simple est simplement d'assigner des class propre à chaque élément, comme .image1, image2, image3, etc...
voilà voilà
