4 imágenes en cada esquina de la pantalla html css

Estoy tratando de colocar 4 pequeñas imágenes en cada esquina de la pantalla. Quiero algo como:

¿Cómo puedo lograr esto usando HTML y CSS?

El siguiente código muestra una imagen donde debería haber 4 pequeños.

div.img { border: 1px solid #ccc; } div.img:hover { border: 1px solid #777; } div.desc { padding: 15px; text-align: center; } * { box-sizing: border-box; } .responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 5000px) { .responsive { width: 49.99999%; margin: 6px 0; } } .clearfix:after { content: ""; display: table; clear: both; } 
 
Trolltunga Norway
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here

Puede usar flex , margin (auto), order y un pseudoelemento para dividir los cuatro elementos para construir su diseño básico.

ejemplo a continuación que coloca cuatro cajas en las cuatro esquinas, pueden llenarse con cualquier cosa y tener un estilo de contenido de todos modos.

 body { display:flex; flex-flow:row wrap; margin:0; height:100vh; } /* body:after actually your code gives a container for this */ .clearfix { /*content:''; display:block;*/ width:100%; order:1; } .responsive { border:solid; margin:0; } .responsive:nth-child(1) { margin-bottom:auto; margin-right:auto; order:0; } .responsive:nth-child(2) { margin-bottom:auto; margin-left:auto; order:0; } .responsive:nth-child(3) { margin-top:auto; margin-right:auto; order:2; } .responsive:nth-child(4) { margin-top:auto; margin-left:auto; order:2; } 
 
Trolltunga Norway
Add a description of the image here
Forest
Add a description of the image here
Northern Lights
Add a description of the image here
Mountains
Add a description of the image here

Aquí tienes: jsfiddle.net/hu7f9d1L .

Captura de pantalla:

Manifestación

La idea detrás de esto es que estamos usando un elemento que contendrá todos los elementos secundarios / esquina, y al usar position: absolute , permanecerán en la esquina. position: fixed uso position: fixed si es necesario ; probablemente de esta manera no necesite usar el elemento ul y cambie li a div .

Intenta cambiar el tamaño de la ventana / iframe, y verás que los elementos div permanecen en su esquina correspondiente.