創建響應式物化卡

我們使用物化卡在我們的網站上顯示圖像。這些圖像是用戶上傳的，因此它們有各種不同的尺寸（儘管它們必須大於250像素）。創建響應式物化卡

我們能夠保持圖像的高寬比，這很好，但我們不知道如何在每行上使卡片高度相同的情況下如何操作。這是我們的目標 - 在保持卡內圖像的縱橫比的同時，讓卡的高度相同（以一種快速響應的方式）。

我們一直是這樣瞎搞一整天沒有得到很遠。任何幫助深表感謝。

HTML：

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12 test"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" alt="Cinque Terre"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.card { 
    position: relative; 
    background-color: #f4f4f4; 
    // margin: 10px auto; 
    height: 100%; 
    box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.7); 
} 

.card { 
    height: 100%; 
} 

.card .card-image img { 
    //object-fit: contain !important; 
}

來源

2016-03-19 mdegges

使用媒體查詢來設置寬度/高度取決於屏幕的大小。例如，在JS小提琴：https://jsfiddle.net/3yegzwex/

HTML：

<div class="row text-center"> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"interior"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://images.cdn.stuff.tv/sites/stuff.tv/files/Mercedes-AMG-GT-Interior-illuminated.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Interior</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"drivetrain"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.revworksinc.com/assets/images/products/subaru/exedy/exedy_brz_twindisc.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Drivetrain</h5> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-12 col-md-4 col-sm-12"> 
    <div class="card" ui-sref='forsaleitem({type:"performance"})'> 
     <div class="card-header card-image waves-effect waves-block waves-light"> 
     <img src="http://www.autonotas.tv/wp-content/uploads/2015/05/SHW_0323-1024x603.jpg" class="img-rounded activator resizeimg" alt="Cinque Terre" height="226"> 
     </div> 
     <div class="card-content"> 
     <h5 class='text-center'>Performance</h5> 
     </div> 
    </div> 
    </div> 
</div>

CSS：

.card { 
    text-align: center; 
} 

@media (max-width: 990px) { 
    .resizeimg { 
    height: auto; 
    } 
} 

@media (min-width: 1000px) { 
    .resizeimg { 
    width: auto; 
    height: 350px; 
    } 
}

來源

2016-03-19 23:14:51

在圖片真的是內聯？或者可以將它們設置爲background-image（因爲它們是用戶上傳的）？如果是這樣，您可以將background-size屬性設置爲cover來解決該問題。也因爲object-fit是not widely supported（還）。

蓋

即是含有逆A關鍵字。將圖像縮放至儘可能大並保持圖像寬高比（圖像不會變爲）。圖像「覆蓋」容器的整個寬度或高度。當圖像和容器具有不同的尺寸時，圖像將被剪裁到左/右或頂部/底部。

來源：MDN

的演示中看到this updated JSFiddle。 padding-bottom可以根據您的需要更改爲百分比。嘗試改變它，看看它做了什麼。

內嵌圖像

如果圖像必須在線，您可以應用此解決方案：

.card-image { 
    width: 100%; 
    padding-bottom: 50%; 
    overflow: hidden; 
    position: relative; 
} 

.card-image img { 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
}

的圖像將.card-image內部，這將伸展至其寬度這是必要的。演示請參閱this JSFiddle。 padding-bottom可以根據您的需要更改爲百分比。嘗試改變它，看看它做了什麼。

來源

2016-03-19 23:19:13 Roy

創建響應式物化卡

回答

相關問題