Autosize css avec margin
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
merci d'avance
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
-
svp quelqu'un peut il m aider?
-
Bonjour,
regarde du coté de :
background-size : 100% 100%;
https://www.w3schools.com/cssref/css3_pr_background-size.asp -
merci tout d abord d avoir repondu mais cette reponse ne convient malheureusement pas :(
autre solution?
MERCI A TOUS -
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 -
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.
