Question

我设置了一些div来显示图像作为链接，我试图设置一种标准化的方式将图像放在div中，并且至少让它拉伸图像以适合我。我真的希望能够调整裁剪以适应广场，但我意识到这可能有点棘手。这是我目前拥有的：（试图发布图片，但还没有代表，所以继承人http://i.stack.imgur.com/nNRD9.jpg

我将如何做到这一点？我认为使用

style="height:100%; width:100%"

可以工作，但它仍然没有将照片拉伸到最大高度，可能是由于我的布局如何。在上面的照片中，每张照片都设置为：

<div class="4u 12u$(mobile)">
            <article class="item">
                    <a href="#" class="image fit"><img src="images/resume.jpg" title="My Resume" alt="My Resume" /></a>
                            <header>
                                <h3>My Resume</h3>
                            </header>

谢谢！

Answer 1

小提琴（http://jsfiddle.net/）和钢笔（http://codepen.io/）是展示你想为别人做的事的好方法。您可以放置HTML，CSS和JS，它将免费为您呈现。检查一下。

您可以分别在div容器display: table和display: table-row上使用display: table-cell，<div>和<article>。

另一个很好的解决方案是使用flexbox，Css Tricks有一个很好的指南。

如果您对网格和框架感兴趣，我建议您查看“基础”，或“Bootstrap”或无数其他HTML5框架。

将您的代码放在一个小提琴中，这样我们就可以帮助您解决代码问题。在此之前，这是一个建议

a{width:auto; display:inline-block; min-height:100px; overflow:hidden;}

img{width:100%;}

Overflow:hidden;会隐藏位于<img/>

范围之外的<a>部分

Answer 2

指定.item类的宽度和高度可能会修复它。请发布您目前为止所做的CSS样式，以便我们可以查看并建议更改以达到您的要求。

适合div预设尺寸的任何图像

2 个答案: