14

I'm working on building a mobile friendly site of our companies main website. The way it is designed is around 2x for retina. What I'm planning to do is set the main content around a maximum width of 640px, width set at 100%. I have a certain background image that fits nicely do that. But as the width of the div gets smaller, I need the height to adjust as well. Any ideas?

Here's the css:

*{margin:0;padding:0}h1,h2,h3,h4,h5,p,li,a,cite{font-size:14px;font-weight:normal}button,img{border:0}body{font-family:Arial, sans-serif;}

body {
  margin:0;
  background-color:#fff;
}

.top, .body {
  max-width:640px;
  width:100%;
  margin:0 auto;
}

.top {
  background: white url(images/top.jpg) no-repeat;
  background-size:auto;
  overflow:hidden;
  height:124px;
  max-height:124px;
}

.top ul {
  list-style:none;
  height:100%;
}

.top ul li {
  height:100%;
  float:left;
  display:block;
}
agmcleod
  • 13,321
  • 13
  • 57
  • 96

4 Answers4

25

I did find an answer to this. It adds a little bit of unsemantic markup, but works well. Can find it here: http://jsfiddle.net/AdQ3P/

The logic is in the padding-bottom. basically this needs to be (img_height / img_width) * 100.

Edit Here's the code, so not dependent on jsfiddle.

<div class="container">
  <div class="hero"></div>
</div>

.container {
  width:100%;
  max-width:500px;
}

.hero {
  width:100%;
  height:0;
  background-size:100%;
  background:url(http://img97.imageshack.us/img97/3410/photo2ue.jpg) no-repeat;
  padding-bottom:75%;
}

Also that was one messy desk i had lol.

agmcleod
  • 13,321
  • 13
  • 57
  • 96
  • 1
    You might want to take a look at this blog post: (It seems like he based it on your answer:) http://inspectelement.com/tutorials/a-responsive-css-background-image-technique/ – Danield Mar 06 '13 at 08:57
  • Possibly :). I believe i ran into a mention of it somewhere and did some tweaking for my purposes. – agmcleod Mar 06 '13 at 13:42
  • interesting idea. do you of any browser compatibility issues? – Moshe Shaham Nov 03 '13 at 12:57
  • I'm not doing that much front-end work right now, so I couldn't tell you. The site I figured out this solution for was tested on Firefox, Chrome, Mobile Safari, and IE 8. – agmcleod Nov 04 '13 at 13:36
5

You can also use a little jQuery. I believe the advantage is that it is a semantically valid fix, so the next guy who edits your code might have an easier time understanding what's going on.

// Maintain aspect ratio of #my_div

// Set aspect ratio of #my_div
var aspect_ratio = 0.8;

// Store the jQuery object for future reference
var $my_div = jQuery("#my_div");

// Within your document ready function,
// Do an initial resize of #my_div
$(document).ready(function(){
  $my_div.height( $my_div.width() * aspect_ratio );
});

// Resize #my_div on browser resize
jQuery(window).resize(function() {
  $my_div.height( $my_div.width() * aspect_ratio );
});
Dutchie432
  • 28,798
  • 20
  • 92
  • 109
chrisfargen
  • 1,517
  • 1
  • 13
  • 11
1

while a non-fixed width (e.g. 100%) takes all the container's width, the height of an element when not set to a fixed size will stretch to accomodate any in-flow content (including padding, margin, borders...)

if you can use an <img> tag instead of a background image, you can then apply max-width:100% to the image itself and it will scale to fit the container - the browser will take care of resizing its height to keep the aspect ratio consistent - however replacing a css background with an image tag is not always possible or the best option in terms of semantics and/or any layout issues you may face.

Luca
  • 9,259
  • 5
  • 46
  • 59
  • Yea the background image is essentially a few items to look like buttons. My plan was to place a list of links on top appropriately. Some of which expand other links. Maybe the best way to slice them separately. Was hoping to keep http requests down :). – agmcleod May 28 '12 at 15:32
  • 1
    you can keep the http requests down for assets like these by creating a single sprite image and then using background-position to display the correct one on each item of your list: http://css-tricks.com/css-sprites/ – Luca May 28 '12 at 15:54
  • If i were to go with your suggest in using an image tag, wouldn't that make such a feature impossible? I've used that for a few things before on backgrounds, very very handy. – agmcleod May 28 '12 at 16:45
  • yes, that's for background images only. the img tag suggestion was because I thought you just had to display an image and nothing else. – Luca May 28 '12 at 16:48
-1

Working very well without a set height or img using the new relative font sizing units, e.g. vm (http://www.sitepoint.com/new-css3-relative-font-size/).

user2917560
  • 1