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

时间:2014-05-21 00:13:14

标签: html css css3 twitter-bootstrap twitter-bootstrap-3

我正在使用bootstrap的网格系统和my website。问题是在初始加载时,项目卡看起来很糟糕:

enter image description here

以及加载后的样子:

enter image description here

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

6 个答案:

答案 0 :(得分:14)

如果已知图像比率,则可以计算其比例

查看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/2177 * 100% 然后将图像设置为绝对位置 现在您的图像可以响应并且无需折叠容器

答案 1 :(得分:3)

您需要将缩略图放在动态大小的容器中,的高度与其宽度成正比。您可以通过匹配容器上的widthpadding-bottom以及其他一些细节来完成此操作,如下面的Bootply和示例所示:

<强> 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-bottomwidth匹配会为您提供方形缩略图容器,但您可以通过调整padding-bottom %将其设为任意比例

注意2:因为您还没有共享您的代码,您可能需要进行一系列的类重命名和测试才能使其正常工作。根据我在您网站上看到的内容,我不得不猜测您的设置。希望它有所帮助!

答案 2 :(得分:1)

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

.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;
  }
}

答案 3 :(得分:1)

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

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

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

答案 4 :(得分:0)

   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 

答案 5 :(得分:0)

您的问题是,在加载时,img的高度= 0,宽度= 100%。因此,当页面加载时,您有一个空图像。

您可以考虑使用Image Preloader:

如果您希望所有图像具有相同的高度,请使用Fake Crop jQuery插件。实际上,它不会裁剪图像文件,但使用CSS定位属性可以使图像获得“裁剪”效果。

此外,您可以为容器分配min-height

 .product-view .img-responsive {min-height:352px; background:#fff;}

您还可以查看延迟加载: