加载图像时保持 div 高度

Posted 2023-03-06

【中文标题】加载图像时保持 div 高度

【英文标题】：Keep div height while the image is loading

【发布时间】：2014-03-26 09:04:39

【问题描述】：

我在.img-container 中有一个正方形图像。有时，加载图像需要几秒钟的时间，.img-container 会折叠，并且仅在图像加载时才占据整个高度。但是，我希望它在加载图像时保持完整高度（就像图像在那里一样）。

我可以通过在img-container 类上设置min-height 轻松完成此操作，但是它是一个流体网格并且图像是响应式的（注意引导程序的img-responsive 辅助类），这使得设置最小-高度为不同屏幕尺寸的适当值（尽管可以通过媒体查询作为最后的手段来实现）。 通过放置一个占位图像来解决这个问题听起来有点矫枉过正（尤其是在移动设备上的性能方面）。此外，不确定首先加载的是占位符图像还是实际图像。

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <div class="card">
      <span class="img-container thumbnail clearfix">
        <img alt class="pull-left img-responsive" src="http://...">
      </span>
      <div class="caption">
        <a href="http://.." class="card-title lead">
          Some text
        </a>
      </div>
    </div>
  </div>

【问题讨论】：

赞成，不是因为问题和解决方案，而是因为“最小高度”是我想要的答案。一石两鸟。谢谢。

【参考方案1】：

好的，假设所有图像都是正方形的，我们可以做到。在你的图片周围添加一个额外的div，如下所示：

<div class="img-container"> <div class="image-wrap">IMAGE HERE</div> </div>

那么我们想要CSS

.img-container 
position:relative;
background: #ccc;
width:200px; /* Remove this width */
color:#000;


.img-container:before
content: "";
display: block;
padding-top: 100%; 


.image-wrap 
position:  absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;

查看实际操作： http://jsfiddle.net/jamesking/LNvmY/

您需要删除在.img-container 中设置的宽度

【讨论】：

所有图像都具有相同的宽/高比 = 1，因为图像是方形的。所有图像的高度和宽度（以像素为单位）也是相同的。

【参考方案2】：

因评论而编辑

如果您根本没有指定来源（甚至不是一个临时的虚拟来源），浏览器甚至不会尝试“猜测”图像的高度，因此它会崩溃。如果你知道图片的比例（如果是方形图片，显然是1:1），你可以使用下面的技巧来占据空间，并随着div缩放图片。

设置以下 CSS：

.test-div-inner 
    padding-bottom:100%;
    background:#EEE;
    height:0;
    position:relative;

.test-image 
    width:100%;
    height:100%;
    display:block;
    position:absolute;

那么你可以使用下面的html：

<div class="test-div-inner">
    <img class="test-image" src="http://goo.gl/lO9SUU">
</div>

下面是工作示例：http://jsfiddle.net/pQ5zh/3/

请注意，小提琴包含另一个 div 元素，这仅在您想为其全部提供填充或边框时才需要，因为padding-bottom 根据像素的宽度计算填充（以像素为单位） div 包括那些参数，这不是我们想要达到的效果（图像会比它应该的高一点）。

对于非方形图片：

如果你想改变图片的比例，只需相应地改变容器div的padding-bottom即可。例如，如果您想以 2:1 的比例放置图像，请将填充更改为 50%。简而言之：容器div 的宽度和内边距的比率应始终等于图像的宽度和高度的比率。

---

有一种简单的方法可以做到这一点，但它仅适用于方形图像。 将图像的宽度（使用 CSS）指定为 100%。这样浏览器会自动假设图片的高度和宽度一样，并占据这个位置。

http://jsfiddle.net/pQ5zh/2/

.test-image 
    width:100%;

注意：对于非方形图像也有一种方法可以实现这一点，但这有点复杂。

编辑：见上文。

【讨论】：

它并没有真正起作用。我尝试删除图像源，.test-div 高度塌陷。当图像不存在时，它应该保持高度。

我已经修改了我的答案来解决这个问题，并且还为非方形图像提供了解决方案。

请记住，这个填充技巧是相对于 parent 元素的宽度的。如果这不是您想要的，请添加一个具有目标宽度和未指定高度的包装器元素，并在其中添加此答案中的 div。