Responsive images and layout sizing help please

[gwmbox]

Hi all

I have been trying my best to get a result where images and content resize as a window resizes and/or it is displayed on smaller screens.

I have three images all of the same height that I need to display at the same height when side by side.

I have drawn up several images (see attachments) to illustrate what I am trying to do

html code


<div class="container">
<div class="my-content">
<div class="left-content"><img src="http://mysite.com/image1.png" alt="image1" width="573" height="415" /></div>
<dib class="right-content">
<div class="left-sub-content"><img src="http://mysite.com/image2.png" alt="image2" width="273" height="415" /></div>
<div class="right-sub-content"><img src="http://mysite.com/image3.png" alt="image3" width="273" height="415" /></div>
</div>
</div>
</div>

Basic css (at this stage) I have tried many configurations including using pixel, em etc measurements instead of % plus various layout configs with floats etc

Assuming the site set max-width is set at 1120px and the container is a set width of 100%, with a 14px padding; The css for the above is


.my-content {
margin: 0.875rem auto 0.875rem 0;
white-space: nowrap;
width:100%;
}
.left-content {
display:inline-block;
width: 50%;
float:left;
}
.right-content {
display:inline-block;
}
.left-sub-content {
display:inline-block;
width: 25%;
}
.right-sub-content {
display:inline-block;
width: 25%;
}

Image 1 - the base full size layout - all three images are the same height and in proportion to the original size of each image

http://gmwebfiles.com/data/g/forumposts/2016/l1.png

Image 2 - the width of the window is smaller than the full size layout and the images etc are resized to fit into that reducing window size, all 3 images are to remain the same height

http://gmwebfiles.com/data/g/forumposts/2016/l2.png

Image 3 and Image 4 - when viewed on even smaller screens the layouts change depending on width, in 3 the two side by side resize as they are moved under the top image, and these two images are displayed at the same height. Finally on the smallest of screens all three images load to the window size width under each other.

http://gmwebfiles.com/data/g/forumposts/2016/l3-l4.png

I hope my request here makes sense and is clear enough to describe what I am trying to do.

Thanks

[Beverleyh]

Your choice of words might be confusing matters. In a few places you describe the image *height* remaining the same while the screen width narrows, but your illustrations have the diagonal arrows, implying proportional scaling.

If height is to remain the same while width narrows, the images will either distort as they get squashed sideways (I don't believe you would want this to happen), or, have their sides cropped so that parts of their left and right sides become hidden. If this is the case, Method #3 from my "3 Ways to Resize/Scale Image in Responsive Web Design" blog would do the job http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design

If however, we're to go by your illustrations, the diagonal arrow implies proportional scaling, where the height and width both resize at a rate that doesn't distort the images. The images will get smaller/larger as the screen width narrows/widens (to a certain breakpoint). Of course this way the height (and width) will change. Method #1 in the blog linked above would fit the bill at first glance and is certainly easiest, however, Method #2 uses background images (as Method #3 does) so you might want to opt for that one (using the images initial ratio, not a target ratio, to maintain proportions) so you can switch between the two at different breakpoints. Method #1 might actually suffice though - it just depends on the effect you want to achieve.

The last thing I would mention is that you will need to use media queries in your CSS in order to switch layouts at given breakpoints. Bear in mind that it is preferable to set media queries based on content (when the content begins to look ropey at X width, change it by setting a custom size media query), and not based on a particular reported device size, because there are so many on the market that it would be impossible to keep up, and we don't know what will emerge in the future. Catering to device size is unpredictable. Catering to changes in your content is much more controllable. To help, Google something like "mobile first media queries" and begin your research there. Mobile first is when you start at the skinniest linear layout and get wider, which is usually easier than working the other way around (desktop first).

Using the blog demos and tips above, and after researching how to use media queries, try setting up a live demo page. Then if you need more help, post a link to that page and somebody can take a look and offer suggestions.

[gwmbox]

Sorry I knew my explanation would be difficult to understand and I can see how my images add to that now that I have re-read it based on what your comments say :)

Re same height, I mean all three images the same height as each other when sitting next to each other in a row, but that height will reduce as the screen size is reduced, I just want to make sure that as the screen size is reduced the height of all three as they reduce in size are all the same height.

Yes once I have the basics working I will certainly have media queries based on window size.

Does that help understand what I am trying to do?

I will do a demo page tomorrow and link it back here as suggested.

[Beverleyh]

Re same height, I mean all three images the same height as each other when sitting next to each other in a row, but that height will reduce as the screen size is reduced, I just want to make sure that as the screen size is reduced the height of all three as they reduce in size are all the same height.Ok, that clarifies things.

The easiest image resizing method (Method #1 in the blog post) should be fine then. Keeping the image height the same across all 3 images at the largest screen size shouldn't be too difficult either with some maths logic. In fact, I mocked up a quick demo - note the calculations to get the .left-content and .right-content % width values in order to keep the height level as all 3 images scale;

.left-content { float:left; width:51.20643% } /* img1 width / (img1 width + img2 width + img3 width) x 100 */
.right-content { float:left; width:48.79357% } /* (img2 width + img3 width) / (img1 width + img2 width + img3 width) x 100 */

http://fofwebdesign.co.uk/template/_testing/test/gwmbox/layout.htm