Results 1 to 4 of 4

Thread: Responsive images and layout sizing help please

  1. #1
    Join Date
    Mar 2005
    Location
    Western Australia
    Posts
    148
    Thanks
    24
    Thanked 4 Times in 4 Posts

    Default Responsive images and layout sizing help please

    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

    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

    Code:
    .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



    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



    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.



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

    Thanks
    1st rule of web development - use Firefox and Firebug
    2nd rule - see the first rule
    --
    I like Smilies

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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/e...ponsive-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.
    Last edited by Beverleyh; 04-07-2016 at 06:07 AM.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Mar 2005
    Location
    Western Australia
    Posts
    148
    Thanks
    24
    Thanked 4 Times in 4 Posts

    Default

    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.
    1st rule of web development - use Firefox and Firebug
    2nd rule - see the first rule
    --
    I like Smilies

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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;
    Code:
    .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/_...box/layout.htm
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Replies: 4
    Last Post: 04-07-2016, 01:13 PM
  2. Responsive images
    By KennyP in forum CSS
    Replies: 4
    Last Post: 09-19-2014, 07:26 AM
  3. Resolved Multizoom - Image sizing in responsive design
    By ozinder in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 02-14-2014, 01:14 PM
  4. Replies: 0
    Last Post: 02-24-2012, 01:39 PM
  5. sizing images Fade-In Slideshow
    By tmcewan259 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-18-2005, 02:35 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •