CSS Image resizing, education preservation

Question

I have an image formation as shown here:

The following is the HTML. The "second panel" is the main shell that has the background image of the building. Each “diamond” image is positioned absolutely using CSS, with pixel values.

<!-- Second panel --> <div id="second-panel" class="parallax-wrapper"> <div id="second-panel-diamonds"> <img class="second-panel-diamond" src="images/furniture-min.png" alt="Furniture" /> <img class="second-panel-diamond" src="images/automobile-min.png" alt="Automobile" /> <img class="second-panel-diamond" src="images/jewelry-min.png" alt="Jewelry" /> <img class="second-panel-diamond" src="images/antique-min.png" alt="Antique" /> </div> <div class="parallax-panel"> ...(not relevant)... </div> </div> 

CSS

 #second-panel-diamonds{ position: absolute; left: 1%; top: -5px; } #second-panel .second-panel-diamond{ position: absolute; /* width: 22%; */ width: auto; height: auto; max-width: 350px; } .second-panel-diamond:first-child{ top: 250px; left: 90px; } .second-panel-diamond:nth-child(2){ top: 80px; left: 260px; } .second-panel-diamond:last-child{ left: 337px; top: 337px; } 

The problem is when it comes to smaller screen sizes, since the images will obviously start to overflow, since they are given a fixed width and height. I tried to set them to the percentage width and height of the car, but then, of course, they will break when they become smaller. I tried to set my positions using percentage values ​​as well, but it does not scale properly according to resizing images and resizing windows.

Is there a way to keep this formation while scaling images down, or do I just need to redesign it for smaller screens?

Answer 1

Yes, using CSS @media queries. You just need to reduce the image size (you do not need to use auto , if necessary calc(auto - px) ) for certain screen sizes (do not forget to change each position of the image later):

 @media screen and (max-width: 600px) { #second-panel .second-panel-diamond { position: absolute; width: 50px; height: auto; } } @media screen and (min-width: 601px) { #second-panel .second-panel-diamond { position: absolute; width: 100px; height: auto; } } 

Answer 2

The easiest way to solve the problem is to combine all the images into one PNG graphic, and then set its width and height as percentage values. Do you need images to be separate?