Redimensionnement d'une image en deuxième position inline-block
fleure_inline
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
inspiring Messages postés 1813 Date d'inscription Statut Membre Dernière intervention -
* « Redimensionnement de mon background-image pour la bannière - problème :
La 2ème image ne s'allonge pas à 700px comme demandé en css Pourquoi ?.
J'ai écrit : <header>< img src="images/logo.jpg"/> <span class="images/image2.jpg"/>
< img src="images/image2.jpg"/> </span>< /header>
et en css :
img { display:inline-block; width:300px; height:300px; margin-top:0px; margin-left:0px; background-attachment:fixed;}
span url "images/image2" { display:inline-block; width:700px; height:300px; border:1px solid gray; margin-left:0px; margin-top:0px;}.
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.
Merci de m'aider. »
La 2ème image ne s'allonge pas à 700px comme demandé en css Pourquoi ?.
J'ai écrit : <header>< img src="images/logo.jpg"/> <span class="images/image2.jpg"/>
< img src="images/image2.jpg"/> </span>< /header>
et en css :
img { display:inline-block; width:300px; height:300px; margin-top:0px; margin-left:0px; background-attachment:fixed;}
span url "images/image2" { display:inline-block; width:700px; height:300px; border:1px solid gray; margin-left:0px; margin-top:0px;}.
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.
Merci de m'aider. »
A voir également:
- Redimensionnement d'une image en deuxième position inline-block
- Block breaker - Accueil - Services en ligne
- Deuxieme ecran pc - Guide
- Ma position - Guide
- Code block - Télécharger - Langages
- Image iso - Guide
1 réponse
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à