<img>高度等於它在div內的寬度

Question

首先，我對CSS不太好，但我試圖使<img>高度等於它的寬度，只用CSS。 我也使用bootstrap如下所示，所以每列的寬度都是相應的。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 

 
.album .album_photo .photo_link img { 
 
    width: 100%; 
 
}

<div class="album"> 
 
    <div class="col-xs-3"> 
 
    <div class="album_photo"> 
 
     <a href="#" class="photo_link"> 
 
     <img src="someurl" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
    <div class="album_photo"> 
 
     <a href="#" class="photo_link"> 
 
     <img src="someurl" /> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

這是怎麼看起來像現在：

，這就是我想要實現：

Answer 1

考慮使用圖像作爲背景連同background-size: cover。

Answer 2

你希望你的「album_photo」類有100％的寬度和高度，因爲這些將填補其中有一類「col-xs-3」

CSS父元素的空間：

.album_photo { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

設置邊距和填充爲0，你會看到img很好地適合父元素。

Answer 3

您可以以任何方式縮放圖像，只需應用寬度爲&的高度即可。例如，您可以說

.full-width-height { width: 100%; height: 100%; } 

您還可以使用最小寬度，最大寬度，最小高度和最大高度。

但是，你會遇到這方面的長寬比問題。

您有將使用CSS和

.auto-width { width: auto; height: xxx; } 
.auto-height { width: xxx; height: auto; } 

引導提供您可以使用，以及一個負責任的類保持縱橫比在檢查兩個選項。該課程是img響應，你可以閱讀關於here。這個類通常與中心塊助手類一起使用。

Answer 4

在此筆看一看，你就會知道如何，使用填充底招做： Code pen

.album_photo { 
    position: relative; 
    padding-bottom: 100%; 
    overflow: hidden; 
} 

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

Answer 5

我喜歡這種方法。它使列的內容（在這種情況下爲.album_photo）position: relative設置元素（'.photo_link img'）position: absolute;的內部包裝，其高度爲100%。爲了保持列的形狀，可以使用具有padding-top: 100%的僞元素。之所以這樣做，是因爲基於百分比的填充總是相對於元素的寬度。因此，使用填充100%時，它將始終與寬度一樣高。您也可以使用相同的方法創建基於比率的容器尺寸（例如，具有絕對定位幻燈片的幻燈片顯示比例爲3：1）。這是一個巧妙的技巧。

@import url(https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css); 
 

 
.album_photo { 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.photo_link img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.album_photo:after { 
 
    content: ''; 
 
    display:inline-block; 
 
    vertical-align: top; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-top: 100%; 
 
}

<div class="container"> 
 
    <div class="album"> 
 
    <div class="col-xs-3"> 
 
     <div class="album_photo"> 
 
     <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="album_photo"> 
 
     <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="album_photo"> 
 
     <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
     <div class="album_photo"> 
 
     <a href="#" class="photo_link"><img src="//placehold.it/300x200" /></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>