自定義網格與圖像

因此，我正在使用像Bootstrap3這樣的庫，因爲我正在學習網絡開發，但我想通過完全理解並能夠重新創建一些可用於引導的東西來深入瞭解網絡開發方面的知識。我目前正在搞定一個自定義網格，並將圖像放入其中，以保持響應。問題是，無論圖像大小是否在我的行中，我都希望圖像都處於一個高度。圖片的寬度與我的想法完全相同，但我無法獲得相同的高度（或者至少切除了多餘的圖片，這是我正在處理的Custom Grid CodePen。很多問題的答案都在使用它，我不使用background-image性質，任何幫助將不勝感激感謝自定義網格與圖像

編輯：！

HTML

<div class="row"> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/M8spMIQcg24"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/U--hvQ5MKjY"> 
    </div> 
    <div class="col-4"> 
     <img class="responsiveImage" src="https://source.unsplash.com/F3ePNdQb_Lg"> 
    </div> 
    </div>

CSS

.row { 
    position: relative; 
    min-width: 100%; 
} 

.col-1 {width: 8.33%;} 
.col-2 {width: 16.66%;} 
.col-3 {width: 25%;} 
.col-4 {width: 33.33%;} 
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;} 
.col-7 {width: 58.33%;} 
.col-8 {width: 66.66%;} 
.col-9 {width: 75%;} 
.col-10 {width: 83.33%;} 
.col-11 {width: 91.66%;} 
.col-12 {width: 100%;} 

[class*="col-"] { 
    float: left; 
} 

.responsiveImage { 
    max-width: 100%; 
    height: auto; 
    padding-top: 30%; 
}

來源

2017-07-18 demogorgon.net

你想要圖像填充它們各自的列，但都具有相同的高度？

你當然可以在圖像周圍添加包裝div並使它們成爲height:200px和overflow:hidden。但是這不會對此作出響應。

如果我正確地理解了你，你想要的東西不能在沒有使用flexbox或javascript的情況下在CSS中完成。看到我無恥地從谷歌挑選的這個codepen：https://codepen.io/imohkay/pen/gpard。或者更深入一下：https://clearleft.com/posts/270

來源

2017-07-18 19:52:46 phil

你需要指定你想要的高度，然後將圖像寬度auto以保持其比例縮放。

.responsiveImage { 
    height: 300px; 
    width: auto; 
    padding-top: 30%; 
}

來源

2017-07-18 19:46:17 Blazemonger

自定義網格與圖像

回答

相關問題