CSS：响应式布局中的高度自动问题答案

【问题标题】：CSS: height auto issue in responsive layoutCSS：响应式布局中的高度自动问题
【发布时间】：2014-07-18 12:50:02
【问题描述】：

我在响应式布局中使用 jquery 延迟加载，并使用空白 gif 作为预览图像。为了让延迟加载工作，我必须通过属性设置图像的高度和宽度。

预览图像未设置为正确的高度，因为 height:auto 似乎是通过 src 而不是 height-attribute 计算高度。我总是得到一个正方形。

这是一个例子：

<!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>

对此有什么想法吗？

【问题讨论】：

标签： html responsive-design css

【解决方案1】：

没有固定的正确高度。如果我在 css 中设置了固定高度，则图像将不会在我的响应式布局中以正确的纵横比调整大小。

主要问题是 css 从由 src-attribute 而不是 width-和 height-attribute 设置的图像计算自动高度和纵横比。因此，如果有一个具有宽度和高度的真实图像，则一切正常。但是如果有一个空白（这只是一个拉伸的 1x1 图像），纵横比将无法正确计算，因为 html 设置的宽度和高度对 css 计算没有影响（但是没有 css 的浏览器如何显示它） -计算）。

我想到的一件事是仅为“真实图像”设置“高度：自动”，并在每次调整窗口大小时通过 jquery 计算“空白图像”的高度：

<!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>

它可以工作，但在包含许多图像的页面上可能会变得非常麻烦。还有其他想法吗？

【讨论】：

这是一个很好的答案。我建议将它与无限滚动一起使用，以免同时加载到许多图像。

【解决方案2】：

正确的高度是多少？如果您尝试使用 500 x 300 像素的固定尺寸，那么我建议您完全使用 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>

【讨论】：

【解决方案3】：

为您的惰性图像添加 .load 事件处理程序。当它们加载时，我们添加 .lazy_loaded 类

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

然后在你的 css 中，只应用 height: auto; .lazy_loaded 的规则

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

【讨论】：