使用引导响应网格系统时如何为图像提供动态宽度和高度

Question

我正在使用 bootstrap 的网格系统，这是我的网站。问题是，在初始加载时，项目卡看起来非常糟糕，如下所示：

这是加载后的样子：

如您所见，问题是因为我没有提供图像的宽度和高度，因此在加载之前我看到了这种奇怪的布局，这不好。我不提供宽度和高度的问题是因为这是响应式的，这样当我调整浏览器的宽度时，卡片的宽度也会改变，因此提供恒定的宽度和高度不起作用。最好的解决方案是什么？

Answer 1

如果已知，您可以计算图像比率，然后将其填充设置为该比率

查看 js 小提琴：

http://jsfiddle.net/J8AYY/7/

<div class="img-container">
    <img src="">
</div>

.img-container {
    position:relative;
    padding-top:66.59%;
}

img {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

因此，如果您的图像宽度为 2197 像素，高度为 1463 像素

然后将包含图像的容器设置为具有 padding-top 1463/2197*100% 然后将图像设置为绝对位置 现在您的图像可以响应并且不用担心容器崩溃

Answer 2

您需要将缩略图放入动态大小的容器中，其高度与其宽度成正比。您可以通过匹配容器上的 width

 和 

padding-bottom

 以及 Bootply 和下面的示例中的一些其他细节来完成此操作：

引导层

示例：

CSS：

.thumbnail_container {
     position: relative;
     width: 100%;
     padding-bottom: 100%; <!-- matching this to above makes it square -->
     float:left;
}

.thumbnail {
    position:absolute;
    width:100%;
    height:100%;
}
.thumbnail img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

img{
    max-height:100%;
    max-width:100%;
}

HTML：

<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
  <div class="row">

  <div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/400x600">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="http://placehold.it/600x600">
      </div>
    </div>  
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
          <img src="http://placehold.it/600x400">
      </div>
    </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
    <div class="thumbnail_container">
      <div class="thumbnail">
        <img src="no-photo" /> <!-- No Photo, but it still scales -->
      </div>
    </div>  
</div>

您会注意到，在最后一个缩略图中，即使没有加载文件，容器也是方形的。这是解决您的特定问题的关键。

注意： 将 padding-bottom

 与 

width

 匹配将为您提供一个方形缩略图容器，但您可以通过调整 

padding-bottom %

 使其成为任何您想要的比例。

注2：因为您还没有共享代码，所以您可能需要进行大量的类重命名和测试才能使其正常工作。我必须根据我在您网站上看到的内容来猜测您的设置。希望有帮助！

Answer 3

如果您使用的图像大小相同，则可以为响应页面的每个步骤设置图像元素的最小高度。您必须找出响应式页面设计的每个步骤中图像的高度，但它可能看起来像这样：

.item-card img {
  min-height: 100px;
}

// Small screen
@media (min-width: 768px) {
  .item-card img {
    min-height: 150px;
  }
}

// Medium screen
@media (min-width: 992px) {
  .item-card img {
    min-height: 200px;
  }
}

// Large screen
@media (min-width: 1200px) {
  .item-card img {
    min-height: 250px;
  }
}

Answer 4

据我了解您的问题，您希望在调整浏览器大小时自动调整图像。我们可以使用下面的 CSS 来实现这一点。

.image-box img {
    width: 100%; 
}

如果我们只指定图像的宽度，高度将自动计算。它将保持图像的纵横比。宽度 100% 将完全适合图像的容器。此代码可能不适用于背景图像。

Answer 5

您的问题是，在加载时，

img

的高度= 0，宽度= 100％。因此，当页面加载时，您会看到一个空图像。

您可以考虑使用图像预加载器：

• ImageLoaderJS
• 预加载JS

如果您希望所有图像具有相同的高度，请使用

Fake Crop jQuery 插件。实际上，它不会裁剪图像文件，而是使用 CSS 定位属性使图像获得“裁剪”效果。

此外，您还可以为容器分配

min-height

：

.product-view .img-responsive {min-height:352px; background:#fff;} 您还可以研究延迟加载：

• 延迟加载
• 延迟加载图像
...

Answer 6

来自

Bootstrap 5.3 文档：

响应式图像

Bootstrap 中的图像通过“.img-fluid”进行响应。这会将“max-width: 100%;”和“height: auto;”应用于图像，以便它随父宽度缩放。

<img src="..." class="img-fluid" alt="..."> 我知道这并不能根据描述中给出的上下文直接回答问题，但对于仅根据标题发现此问题并正在寻找直接答案的用户来说，它可能仍然有用。

Answer 7

   use bootstrap or @media queries

  /* Small devices (tablets, 768px and up) */
  @media (min-width: @screen-sm-min) { ... }

 /* Medium devices (desktops, 992px and up) */
  @media (min-width: @screen-md-min) { ... }

   /* Large devices (large desktops, 1200px and up) */
    @media (min-width: @screen-lg-min) { ... }

      We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

    @media (max-width: @screen-xs-max) { ... }
    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
    @media (min-width: @screen-lg-min) { ... }

     http://getbootstrap.com/css/#grid