Home/ Questions/Q 8659221
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T15:57:41+00:00

I’m trying to fit 3 pictures in one HTML page, such that maximum screen

  • 0

I’m trying to fit 3 pictures in one HTML page, such that maximum screen area will be used, without scrolling. When screen size changes the pictures should be re-arranged, covering maximum screen arena. Each picture has different dimensions. For easier fitting each pic could be cropped (2:3 proportion max). The layout should be fluid and responsive. See example below

enter image description here

Two frameworks I’m considering for this problem are Twitter Bootstrap and jQuery Masonry, but none of these solves the problem of fitting.

Currently I solve this problem making square thumbnails out of each with css and overlapping those pictures, but users want the see the entire picture without overlapping and as big as possible:

!Cropping to square, example at vash.co

you can see it in action at vash.co

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can get pretty close using pure CSS. Take this example, try it in Google Chrome: http://jsbin.com/ixomav/1 (source)

    It’s pretty crude but it should get the idea across. Going furthur you could add js code to resize images with a proper aspect ratio or keep trying with a css only approach. I used random images from wikipedia for my example but you may have an easier time if all your photos are the same dimensions.

    If you remove the height you’ll get properly aspected images but the problem with that is the white space, example: http://jsbin.com/ixomav/2

    Check out Isotope: http://isotope.metafizzy.co/demos/images.html

    • 0