Question

我使用Freewall http://vnjs.net/www/project/freewall/找到了一个简单的网格库。

画廊工作正常，但是我无法将图像重新调整为div，我尝试过使用物体贴合，这似乎不会产生不同的＆amp;＆amp; amp;＆amp; amp;＆amp;＆amp; amp; ;也试过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，我不介意，但是如果有人可以提供可以应用于非常感激的图像的强大解决方案，那么图像缩放对我来说已经成为一个问题了。

Answer 1

在你的风格中添加background-size: cover;并将其调整为div的宽度＆amp;身高总是如下

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>";

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

1 个答案: