Autosize css avec margin

steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention   -  
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour a tous,

j'aimerai avoir 4 images centrées avec un espace entre elles et que selon la taille de l écran les images se redimensionnent, j ai essayé ceci mais ça ne réduit pas les images ça les coupes!

quelqu un pourrait il m aider svp?

voici mon code css


body {
background-image:url(alu.jpg);
background-repeat:no-repeat;
background-size: cover;

}

div#I10 {
background-image: url(i10.jpg);
background-repeat: no-repeat;
position: absolute;
top: 15px;
margin-left: 10%;
width: 20%;
height: 20%;
}

div#I20 {
background-image: url(i20.jpg);
background-repeat: no-repeat;
position: absolute;
top: 15px;
margin-left: 30%;
width: 20%;
height: 20%;
}

div#I30 {
background-image: url(i30.jpg);
background-repeat: no-repeat;
position: absolute;
top: 15px;
margin-left: 50%;
width: 20%;
height: 20%;
}

div#I40 {
background-image: url(i40.jpg);
background-repeat: no-repeat;
position: absolute;
top: 15px;
margin-left: 70%;
width: 20%;
height: 20%;
}


merci d'avance

5 réponses

steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
svp quelqu'un peut il m aider?
0
EnvoxX Messages postés 21 Date d'inscription   Statut Membre Dernière intervention  
 
Bonjour,

regarde du coté de :

background-size : 100% 100%;


https://www.w3schools.com/cssref/css3_pr_background-size.asp
0
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
merci tout d abord d avoir repondu mais cette reponse ne convient malheureusement pas :(

autre solution?

MERCI A TOUS
0
steve-elipz Messages postés 148 Date d'inscription   Statut Membre Dernière intervention  
 
j aimerai vraiment faire ceci en faite:

9 images en tout sur 3 series de 3


1 2 3

4 5 6

7 8 9

le 2,5,8 soient centrés et qu il y ait un espace entre ceux de gauche et de droite (1,3) (4,6) (7,9)

et que toutes les images s'autosize selon l ecran

j espere avoir ete plus precis dans ma demande

encore une fois, merci
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
animostab Messages postés 2829 Date d'inscription   Statut Membre Dernière intervention   738
 
Salut

tu peux faire

<div id="bloc-img">
<div class="cadre"><img src="image1.jpg" /></div>
<div class="cadre"><img src="image2.jpg" /></div>
<div class="cadre"><img src="image3.jpg" /></div>
etc...
</div>


css

#bloc {
width:100%;
text-align:center; /*centre les class cadre*/
margin: 10px 0;
}

.cadre {
display: inline-block;
width: 30%;
margin: 10px 0;
}

.cadre img {
margin:0;
padding:0;
width:100%;
}

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.
0