стрейч изображение над div

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>