彈力圖像分格

Question

我有一個畫廊，縮略圖的寬度設置爲100％。然而一些圖像並不能填充這個div的全部高度。

我該如何獲得它，使圖像伸展在div的全部寬度和高度？ （不能更改爲背景圖像）

<div class="gallery-grid"> 
    <div class="section group"> 
     <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(1);"><img src="images/flowers.jpg" alt="" /></a> 
     </div> 
     <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(2);"><img src="images/back.jpg" alt="" /></a> 
     </div> 
     <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(3);"><img src="images/flowers.jpg" alt="" /></a> 
     </div> 
     <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(4);"><img src="images/back.jpg" alt="" /></a> 
     </div> 
     <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(5);"><img src="images/flowers.jpg" alt="" /></a> 
     </div> 
      <div class="col span_1_of_6"> 
     <a href="javascript: changeImage(6);"><img src="images/back.jpg" alt="" /></a> 
     </div> 
    </div> 



<!--style--> 
    .gallery-grid img{ 
     width:100%; 
    } 

Answer 1

它適用於我。你必須有一些其他的CSS影響它。在這裏看到：http://codepen.io/anon/pen/JGmRBW

.gallery-grid img{ 
    width:100%; 
} 

Answer 2

試試這個：

gallery-grid .section .col a{ 
    display: block; 
} 
.gallery-grid .section .col a img { 
    width: 100%; 
    height: 100%; 
} 

您應該考慮到a是一個內聯元素，所以把圖像propely在裏面，你可能需要正確地設置其display屬性。

在行動

a{ 
 
    display: block; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
img{ 
 
    width: 100%; 
 
    height: 100%; 
 
}

<p>The parent anchor has 100x100 dimentions:</p> 
 
<p>The child image has 100x50 dimentions:</p> 
 

 
<a href=""><img src="https://placehold.it/100x50"></a>