【问题标题】：stretch image over div在 div 上拉伸图像
【发布时间】：2016-02-05 16:36:50
【问题描述】：

我有一个画廊，缩略图的宽度设置为 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%;
    }

【问题讨论】：

缩略图是否都具有相同的高宽比？

标签： html css image stretch

【解决方案1】：

它对我有用。你必须有一些其他的CSS影响它。见这里：http://codepen.io/anon/pen/JGmRBW

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

【讨论】：

【解决方案2】：

试试这个：

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

您应该认为a 是一个内联元素，因此要将图像正确放入其中，您可能需要正确设置其display 属性。

在行动

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

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

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

【讨论】：