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

Make Images the same size, and not will be distorted

本文关键字：图像      更新时间：2023-09-26

我只是想让我所有的图片从我的instafeed将全部是相同的大小，不应该被扭曲和图像将自由调整大小(响应)，我希望它看起来完全像这样:instagram图像，我们可以放大图像一点，使溢出隐藏，它只是我不知道的技巧:)

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

小提琴来了

解释这里发生了什么:

首先，我将图像移动为锚(<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属性。

好了!

相关文章：