如何在使用自舉響應網格系統時爲圖像提供動態寬度和高度

Question

我正在使用引導程序的網格系統，這裏是my website。問題是，在初始加載的項目卡看起來很糟糕的是這樣的：

這裏是它看起來它加載後，如：

正如你所看到的問題是因爲我沒有提供圖像的寬度和高度，因此在它加載之前，我看到這個奇怪的佈局，這是不好的。我不提供寬度和高度的問題是因爲這是響應式的，所以當我調整瀏覽器的寬度時，卡的寬度也會改變，因此提供恆定的寬度和高度不起作用。什麼是最好的解決方案呢？

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像素

然後將包含圖像的容器設置爲具有填充頂部1463/2197 * 100％ 然後將您的圖像設置爲絕對位置 現在您的圖像可以響應並且無需摺疊容器

Answer 2

如果您使用的圖像尺寸完全相同，則可以爲響應頁面的每個步驟在圖像元素上設置最小高度。你將不得不找出圖像有多高的響應頁面設計的每一個步驟，但它可能是這個樣子：

.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 3

你需要把你的縮略圖動態大小的容器，其高度正比於它的寬度。

Bootply

例：

CSS：

您可以通過在容器上匹配 width和 padding-bottom，以及其他一些細節如Bootply和下面的例子做到這一點

.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 4

據我瞭解您的問題，您希望圖像在瀏覽器調整大小時自動調整。我們可以使用下面的CSS來實現這一點。

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

如果我們只指定圖像的寬度，將自動計算高度。它將保持圖像的高寬比。寬度100％將完全適合圖像的容器。此代碼可能無法用於背景圖像。

Answer 5

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 

Answer 6

你的問題是，在裝載時，所述img具有高度= 0和寬度= 100％。所以，當頁面加載時你有一個空的圖像。

你可以考慮使用圖像預加載：

• ImageLoaderJS
• PreloadJS

如果你想所有的圖像具有相同的高度，然後用Fake Crop jQuery插件。實際上，它不裁剪圖像文件，但圖像使用CSS定位屬性獲得「裁剪」效果。

此外，您還可以指定一個min-height到容器：

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

您也可以考慮延遲加載：

• LazyLoad
• Lazy Loading Images
• ...