CSS: height auto issue in responsive layout

Question

i use jquery lazy load in a responsive layout with a blank gif as preview-image. To get lazy load working i have to set a height and width of the image by attributes.

The preview-image is not set to a correct height because height:auto seems to calculate the height by the src not by height-attribute. I allways get a square.

Here is an example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      background-color: #000;
      max-width: 100%;
      height: auto;
    }
  </style>
</head>
<body>
  <img src="blank.gif" width="500" height="300">
</body>
</html>

Any ideas for that?

score 3 · Answer 1 · answered Sep 14 '12 at 08:19

There is no fixed correct height. If i set a fixed height in css the image will not resize with correct aspect ratio in my responsive layout.

The main problem is that css calculates the automatic height and aspect ratio from the image which is set by the src-attribute and not by the width- and height-attribute. So if there is a real image which has a width and height everything works fine. But if there is a blank (this is only a stretched 1x1 image) the aspect ratio will not be calculated correctly because the width and height set by html has no influence on the css-calculation (but how it shown by the browser without the css-calculation).

One thing i thought about was to set "height: auto" only for "real images" and calculate the height of "blank images" by jquery on every window resize:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      max-width: 100%;
    }
    .lazy-loaded {
      height: auto;
    }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="JavaScript">
    $(document).ready(function(){
      resizeBlankImages();
    });
    $(window).resize(function(){
      resizeBlankImages();
    });
    function resizeBlankImages() {
      $(".lazy-blank").each(function () {
        var originalWidth = $(this).attr('width');
        var originalHeight = $(this).attr('height');
        var ratio = originalWidth/originalHeight;
        var width = $(this).width();
        var height = width/ratio;
        $(this).height(height);
      });
    }
  </script>
</head>
<body>
  <img data-original="image.jpg" src="image.jpg" class="lazy lazy-loaded" width="500" height="300">
  <br/>
  <img data-original="image.jpg" src="blank.gif" class="lazy lazy-blank" width="500" height="300">
</body>
</html>

It works but it could get very cumbersome on a page with many images. Anyone another idea for that?

This is a good answer. I suggest to use it with Infinite Scroll to not load to many images at the same time. — jjj, Aug 13 '13 at 08:11

score 0 · Answer 2 · answered Sep 13 '12 at 18:15

What is the correct height? If you're trying for a fixed size of 500 x 300px, then I'd suggest doing so fully from CSS.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Test</title>
  <style type="text/css">
    img {
      background-color: #000;
      max-width: 100%;
      width: 300px;
      height: 500px;
    }
  </style>
</head>
<body>
  <img src="blank.gif" alt="preview" />
</body>
</html>

LiveSource · Answer 3 · 2014-07-18T04:50:02.627

0

Add a .load event handler to your lazy images. When they load, we add the .lazy_loaded class

$("img.lazy").lazyload().load(function() {
    var self = $(this);
    if(self.attr('src') == self.data('original')){
        self.addClass('lazy_loaded');
    }
});

Then in your css, only apply the height: auto; rule to .lazy_loaded

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

edited Jul 18 '14 at 04:50

answered Jul 18 '14 at 04:16

LiveSource

6,230
4
21
20

CSS: height auto issue in responsive layout

3 Answers3

Linked