在行动中

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是一个内联元素，因此要将图像正确放入其中，您可能需要正确设置其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>

在div上拉伸图像

2 个答案:

在行动中