DEMO

Question

我的图像具有动态宽度和高度，使用此css：

.sm_item_image {
    width:100%;
    height:auto;
    max-width:400px;
}

问题是图像可能需要一段时间才能下载，而当它还没有时，高度为0.基本上有一些不需要的内容。我正在寻找一种方法将高度设置为某种东西，以便占用与当前宽度相同的空间。

有人知道某种方式吗？

由于

Answer 1

A）在width上使用height和<img>

这是width的{{1}}和height属性的用途。如果您在创建<img>标记时知道服务器端的图片尺寸，请将其放入，即使您使用<img>覆盖它们也是如此。浏览器将知道计算比例高度，并在加载图像之前正确调整页面大小。

B）使用隐形缩略图

另一种选择是为您的图像添加小缩略图，您只需加载它们，以便快速生成正确的比例。它们可以小20倍，没关系，因为你没有显示它们。您只在加载时显示完整图像，作为图像占位符的背景。

示例：

CSS

.imgContainer {
  background: #eee no-repeat 50% 50% /cover;
  overflow: hidden;
}
.imgContainer > img {
  opacity: 0;
  width: 100%;
  float: left;
}

B）的小额“奖励”是用户在尝试下载您的脆弱图片时获得的惊喜，并在右键单击＆gt;上结束微缩图。 “将图像另存为......”

这是一个实际的例子，使用了一个巨大的图像：

<div class="imgContainer" style="background-image: url('//path/to/full/image')">
   <img class="img-responsive" src="//path/to/thumbnail" />
</div>

$('.imgContainer>img').on('click', function(){
  $(this).toggleClass('visible');
})

.imgContainer {
  background: #eee no-repeat 50% 50% /cover;
  overflow: hidden;
}
.imgContainer > img {
  opacity: 0;
  width: 100%;
  float: left;
  transition: opacity .3s ease-in-out;
  cursor: pointer;
}

.imgContainer > img.visible {
  opacity: 1;
}

 /* SO reset, you don't need what's below, it's just positioning and reset */
body {
  padding: 0; margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
}
.imgContainer {
  width: 60%;
}

我在这个上添加了一个小脚本，可以在点击时切换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="imgContainer" style="background-image: url('http://wallpapercave.com/wp/wc1756933.jpg'), url('http://www.steblesproperty.com/wp-content/uploads/2015/04/demo55-143x83.jpg');"> <img class="img-responsive" src="http://www.steblesproperty.com/wp-content/uploads/2015/04/demo55-143x83.jpg" /> </div>缩略图，这样您就可以看到差异。

如果完整图片需要很长时间才能加载，并且您不介意用户在等待时看到缩略图，请将缩略图添加到opacity属性，就像我在上面的示例中所做的那样：

background-image

您可以在<div class="imgContainer" style="background-image: url('//path/to/full/image/'), url('//path/to/thumbnail/image/');"> <img src="//path/to/thumbnail/image/" class="img-responsive" /> </div>属性中设置多个图像，它们将全部加载（如果找到），第一个在顶部，最后一个在底部。因此，用户将看到模糊的拇指，直到全尺寸加载并且图像将突然清除并变得清晰。

Answer 2

实际上，我认为有一个非常简单的解决方案：将容器宽度除以图像宽高比即可。唯一的技巧是容器宽度需要以vw单位表示。因此，例如，如果您有一个16：9的长宽比图像，并且容器是视口的整个宽度，则代码应为：

img.responsive {
  width: 100%;
  height: auto;
  min-height: calc(100vw / 1.77777);
}

对于不同大小的容器，您只需将100vw更改为实际的容器大小。因此，例如，如果您的容器是页面宽度的50％，则图像的最小高度应为calc(50vw / 1.77777)。

DEMO

Answer 3

您必须像这样设置一个min-height值：

.sm_item_image {
    width:100%;
    height:auto;
    max-width:400px;
    min-height: 200px; /* replace 200px with whatever height that you want that you want while it's loading */
}

如何在html中为动态高度的图像设置占位符高度？

3 个答案:

DEMO