html - 以 div 的预设大小适合任何图像

Question

我设置了一些 div 以将图像显示为链接，我试图建立一种标准化的方式将图像放置在 div 中，并且至少让它拉伸(stretch)图像以适合我。我真的很想能够调整裁剪以适合正方形，但我意识到这可能有点棘手。这是我目前拥有的:(试图张贴图片，但还没有代表，所以这是一个链接 http://i.stack.imgur.com/nNRD9.jpg

我该怎么做呢？我认为使用

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

会工作，但它仍然没有将照片拉伸(stretch)到最大高度，可能是由于我的布局方式。在上面的照片中，每张照片的设置如下:

<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

一把 fiddle (http://jsfiddle.net/) 和一支笔 (http://codepen.io/) 是展示您正在努力为他人做的事情的好方法。您可以放置​​ HTML、CSS 和 JS，它会免费为您呈现。检查它们。

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

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

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

将您的代码放在 fiddle 中，以便我们能够帮助您解决代码问题。在那之前，这里有一个建议

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

img{width:100%;}

Overflow:hidden;将隐藏 <img/> 的部分位于 <a> 范围之外