弹力图像分格

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>