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

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