调整图像大小以适应 Div 的限制答案

【问题标题】：Resizing images to fit a Div's restrictions调整图像大小以适应 Div 的限制
【发布时间】：2016-07-03 04:40:51
【问题描述】：

我使用 Freewall 整理了一个简单的网格画廊，可以在此处找到 http://vnjs.net/www/project/freewall/。

画廊工作正常，但我无法将图像调整为 div 的大小，我尝试使用 object-fit，这似乎并没有做出不同的 && 也尝试了 img-responsive。这也没有奏效。我在下面添加了代码

<div class="row">
        <div class="col-md-12">
            <div id="freewall" class="free-wall"></div>
        </div>
    </div>
    <script type="text/javascript">

        var temp = "<div class='cell img-responsive' style='width:{width}px; height: {height}px; background-image: url(img/gallery/test/{index}.jpg);'></div>";
        var w = 400, h = 400, html = '', limitItem = 49;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new Freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 400,
            cellH: 400,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>

CSS

.free-wall {
    margin: 15px;
    object-fit: scale-down;
}

还有一个屏幕截图，以便您查看问题我不介意我是否必须使用 Jquery 或 Javascript，但图像缩放对我来说已经有一段时间了，如果有人能提供一个可以应用于图像的强大解决方案，将不胜感激。

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

在你的样式中添加background-size: cover;，它会调整为div的宽度和高度，如下所示

var temp = "<div class='cell img-responsive' style='width:{width}px; height: {height}px; background-image: url(img/gallery/test/{index}.jpg);background-size: cover;'></div>";

【讨论】：