javascript - 使图像大小相同，并且不会失真

Question

我只希望我的 instafeed 中的所有图像都具有相同的大小，不应该被扭曲并且图像可以自由调整大小(响应)，我希望它看起来完全像这样:instagram images ，我们可以稍微缩放图像并 overflow hidden ，只是我不知道技巧:)

这是我的作品:http://jsfiddle.net/jazzu20/1c9yf61x/

img {
    max-width: 100%;
    border: 0;
    
}

.col-md-3 {
    width: 25%;
    float: left;
}

.livery-instafeed-section {
    min-height: 285px;
}

<div class="livery-instafeed-section col-md-12">
   <div id="instafeed">
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9JOiOdMLo5/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/11251638_621920521284538_937019183_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9Gp4RjMLgE/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xpf1/t51.2885-15/s640x640/sh0.08/e35/1390058_175285799480082_576833592_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9FJpd7MLts/" target="_blank">
                <img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12093236_443227142549068_286565452_n.jpg">            
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9D_lqkMLqV/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12145135_1069396733117579_706096349_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9Bb92JMLhh/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12093429_1668694736699760_1827692759_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/9ACbbHMLlD/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xfa1/t51.2885-15/s640x640/sh0.08/e35/12135431_1733638416868070_1024332902_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/8_BXkSsLn5/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12105054_849750965144841_2082888771_n.jpg">
                </a>
            </div>
            <div class="col-md-3" style="padding:0;">
                <a href="https://instagram.com/p/89fRuosLje/" target="_blank">
                    <img src="https://scontent.cdninstagram.com/hphotos-xaf1/t51.2885-15/s640x640/sh0.08/e35/12107557_866233773472414_1869843871_n.jpg">
                </a>
            </div>
    </div>
               

Answer 1

Here's a fiddle .

这里发生的事情的解释:

首先，我将图像移动为 anchor (<a>) 标签的背景图像。这给了你更多的灵 active ，因为你可以使用 background-position和 background-size属性。

接下来我定位了 anchor absolute (和列 relative 以确保 anchor 考虑到它的父大小)并使其与列一样高和宽。

现在宽度相同，但高度不同，因为列本身没有高度。给它一个百分比高度对你没有帮助，因为那是相对于父级的，而你想让列的高度相对于它自己的高度。现在开始使用经典的填充技巧；给元素一个 bottom-padding 并使它的子元素 100% 是它父元素的高度，像这样:

.parent { width: 25%; padding-bottom: 25%; } /* .col-md-3 in your case */
.child { position: absolute; width: 100%; height: 100%; }

现在我们有了完美的正方形元素，图像作为背景。这通常就足够了，因为使用 background-size: cover浏览器会确保图像会跨越整个 div。但是，由于您的图像带有白色边框(侧面和顶部/底部)，因此您必须缩放它们以更正它。边框越大(例如，对于全景图像)，缩放尺寸越大。这就是我创建 .zoom 的原因和 .zoom2类，这只会增加 background-size属性(property)。

给你!