使 holder.js 与其他引导缩略图图像大小相同？答案

【问题标题】：Make holder.js same size as other bootstrap thumbnail images?使 holder.js 与其他引导缩略图图像大小相同？
【发布时间】：2014-09-30 00:27:55
【问题描述】：

我有一行，其中一个有图像，但另一个没有，并使用 holder.js 作为占位符。

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="image.jpg"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="holder.js/100%x100%"/>
        </div>
    </div>
</div>

我的缩略图css是：

.thumbnail > img {
    width: 45%;
}

holder.js 不适合引导程序缩略图的宽度和高度。它正在生成一个 248x20 大小的占位符图像，它的高度太小了。宽度看起来虽然找到了。

如何使占位符图像与引导缩略图图像具有相同的尺寸？

【问题讨论】：

将 holder.js 的大小设置为与您要匹配的图像相同的尺寸。换句话说，如果你的 image.jpg 是 400px x 400px 然后使用：src="holder.js/400x400"

标签： javascript html css twitter-bootstrap-3 holder.js

【解决方案1】：

指定高度不是百分比<img src="holder.js/100%x75"> Official documentation

【讨论】：

【解决方案2】：

您可能没有在 .thumbnail 类上明确设置高度。因此，当 Holder 试图获取占位符父级的高度时，它会得到一个不正确的值。设置.thumbnail 的高度，您的代码应该可以工作。

【讨论】：