Question

你好，这里有新的，

我只是希望我的所有图像都是相同的尺寸，不应该扭曲，图像会自由调整（响应），我希望它看起来像这样

我在这里测试了http://jsfiddle.net/jazzu20/1c9yf61x/

<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

你可以这样做：

注意：图像不相同。你能做的最好的就是调整图像。

<强> CSS

#instafeed div a{
    display: block;
    border: solid 10px #fff;
}

#instafeed div a img{
    width: 100%;
    vertical-align: top;
}

<强> DEMO HERE

另一种解决方案

<强> CSS

#instafeed div a{
    position: relative;
    display: block;
    position:relative;
    overflow: hidden;
    height: 250px;
}

#instafeed div a img{
    position: absolute;
    vertical-align: top;
    z-index:-1;
    left: -50%;
    top: -50%;
}

<强> DEMO HERE

使我的Instafeed图像大小不同，看起来像扭曲

1 个答案: