CODEWITHSUNDEEP
htmlcssresponsive-designfluid-layout
James
James

Reputation: 4783

Responsive design - images not scaling proportionately

I have a 3 column fluid layout, each column % widths.
Left and right column content is just images, which scale up/down as desired when browser size is changed.

In the centre column, I have a header area with a background image, with the logo image and text image on top of the background image.

The background image, logo, and text image all scale with browser resize, however not in proportion to each other.

That is, when the browser size is reduced, the logo becomes smaller quicker than the background image, so is no longer proportionate to the background image. As a result the logo image becomes tiny on the background image.

You can see it working here: http://jsfiddle.net/james2014/KSq5j/embedded/result/

If you slowly resize your browser, you can see all images start to scale down, but the logo (green thing with "whatever" in it) becomes too small for the blue background, as does the text.

And the code, in JSFiddle: http://jsfiddle.net/james2014/KSq5j/

The blue gradient background image is large (2000+px) to allow it to scale up for potentially large screens, filling the centre area's % width, but I think it's this which perhaps ruins the scaling proportions.

I've tried for days with different CSS, background size, different widths and image sizes. Can anyone suggest what might be needed in the CSS? I'd consider a new approach, without the background image being huge, if there's a solution with this too.

Here's the code: HTML

<!DOCTYPE html>
<html>
  <head>
    <title>3 column responsive</title>
    <link rel='stylesheet' type='text/css' href='style.css'>
  </head>
<body>

<!-- MASTER LEFT COLUMN -->
<div id="master-column-left">
  <img src="http://s27.postimg.org/umuoxsb6b/site_left_image.png">
</div>


<!-- MASTER CENTRE COLUMN -->
<div id="master-column-centre">

  <!-- Header -->
  <div id="header-centre">

    <!-- Logo -->
    <div id="main-top-logo">
      <img src="http://s27.postimg.org/40i88t6z3/logo.png">
    </div>

    <!-- Some Text -->
    <div id="some-text">
      <img src="http://s27.postimg.org/a05zcgrrj/some_text.png">
    </div>

    <div style="clear-both"></div>

  </div>
  <!-- end Header -->

</div>
<!-- end MASTER LEFT COLUMN -->


<!-- MASTER COLUMN RIGHT -->
<div id="master-column-right">
  <img src="http://s27.postimg.org/68weq5e37/site_right_image.png">
</div>

<div class="clear-both"></div>

</body>
</html>

CSS

body
  {
    margin: 0; padding: 0;
  }

img { max-width: 100%; height: auto; }

/** COLUMN WRAPS **/
#master-column-left
  {
    width: 20%;
    float: left;
  }
#master-column-centre
  {
    width: 59.5%;
    float: left;
  }
#master-column-right
  {
    width: 20%;
    float: left;
  }

/** HEADER **/
#header-centre
  {
    float: left;
    width: 100%;
    padding: 0 0 1.3em 0;
    background-image: url('http://s27.postimg.org/guga25ker/content_header_image.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-top: 1px solid #4c6623;
  }

/** LOGO **/
#main-top-logo
  {
    float: left;
    width: 10%;
    margin: 1.3em 0 0 2em;
  }
/** TEXT **/
#some-text
  {
    float: left;
    margin: 2.3em 0 0 9em;
    width: 28%;
  }

Upvotes: 1

Views: 474

Answers (2)

James
James

Reputation: 4783

For anyone else ending up here with a similar issue.

TimSPQR's answer was very helpful, gives food for thought and certainly might resolve others' issues.

However I've found the issue I was having with my code was specifically the padding on both the header background image and logo containers were not scaling in proportion with the scaled sizes of the images.

Even though the padding was em, and should ideally scale as desired, it wasn't.
Changing the padding to percentage (%), and of course the values, resolved my headaches.

Upvotes: 0

TimSPQR
TimSPQR

Reputation: 2984

I've used jQuery to keep the heights all the same in this updated FIDDLE.

But I'm not sure it's really optimal.

I wonder if you could put all three of the top items in a single div, and then put three columns below them. That's the only way I can think of in CSS.

edit: If you made the center header an image, it could be treated the same way as the other two images.

I'm sure others will chime in with some better ideas.

JS

var bikeheight = 0;
bikeheight = $('#master-column-left img').height();
$('#header-centre').css('height', bikeheight-22);

$(window).resize(function(){
  bikeheight = $('#master-column-left img').height();
  $('.putmehere').html(bikeheight);
  $('#header-centre').css('height', bikeheight-22);
});

Edit 2: We may have a solution based on this excellent page: http://www.mademyday.de/css-height-equals-width-with-pure-css.html

Here is the FIDDLE.

Upvotes: 1

Related Questions