Home/ Questions/Q 7945059
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T00:44:32+00:00

I’m trying to create a HTML page that can be re sized to most

  • 0

I’m trying to create a HTML page that can be re sized to most modern resolutions, I’m using % for all my div containers and they are scaling nicely but I have images in these containers and they are staying the same size.

I don’t want the images to lose their aspect ratio but I need them to re size to fit in the containers. My example works fine on a 4:3 ratio screen but on a widescreen the images are being cut off. The image I’m using is 213px wide x 300px high. If I have to use js to solve then that’s ok.

<div style="position:fixed;top:2%;left:2%;overflow:hidden;height:38%;width:12%;text-align:center;border:.15em solid #000;">
   <div style="padding:1% 1% 5% 1%;font-size:90%;font-family:'trebuchet MS', verdana, arial, sans-serif;color:#000;"><b>TEST</b></div>

   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
   <div style="padding:1%;width:44%;display:inline-block;">
      <img src="black_card.jpg" style="max-width:100%;" alt="Black" />
   </div>
</div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I managed to solve this one myself, I give the container div a height and width then all other divs and images below only get a height, this makes the screen size dynamic, I had to use display:-moz-inline-block to get the images to centre in the container div. Check it out http://jsfiddle.net/mb5T4/2/ re size the result screen into a typical ratio (4:3, 5:4, 16:9) and all the images resize in the div.

    • 0