Question

我只是希望我的所有图像都来自我的默认设置将是相同的大小，不应该被扭曲，图像将自由调整大小（响应），我希望它看起来完全像这样：instagram images，我们可以缩放图像并使溢出隐藏，它只是我不知道技巧：）

这是我的工作：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

解释这里发生的事情：

首先，我已将图像移动为锚点（<a>）标记的背景图像。这为您提供了更大的灵活性，因为您可以使用background-position和background-size属性。

接下来，我已经找到了锚absolute（和relative列，以确保锚点考虑到它的父母大小）并将其设为高度和宽度作为专栏。

现在你有相同的宽度，但高度不一样，因为列没有自己的高度。给它一个百分比的高度对你没有帮助，因为那将是相对于父亲的，而你想让列具有相对于它自己的高度的高度。现在踢出经典的填充技巧;给元素一个底部填充，让它的孩子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属性。

你去吧！

使图像大小相同，不会扭曲

1 个答案: