时间戳

首页 > 解决方案 > 实时服务器中的画廊网格溢出

html - 实时服务器中的画廊网格溢出

问题描述

我有一个 HTML 文档。当我在 localhost 中运行它时，它运行良好。但是当我在实时服务器中运行它时会出现问题。画廊项目溢出。但有趣的是，当我调整窗口大小时，它会自动修复。我使用了 Magnific 弹出窗口和 Isotope。

在实时服务器中显示的图像

这是我的html代码：

<div class="gallery"> 
            <div class="row"> 
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item department doctor patient" href="assets/images/gallery/gallery-3.jpeg"> 
                    <img src="assets/images/gallery/gallery-3.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-4.jpeg"> 
                    <img src="assets/images/gallery/gallery-4.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item department" href="assets/images/gallery/gallery-5.jpeg"> 
                    <img src="assets/images/gallery/gallery-5.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item doctor department" href="assets/images/gallery/gallery-6.jpeg"> 
                    <img src="assets/images/gallery/gallery-6.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item surgery department" href="assets/images/gallery/gallery-7.jpeg"> 
                    <img src="assets/images/gallery/gallery-7.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->
                <div class="col-sm-6 col-md-4 gallery-item patient" href="assets/images/gallery/gallery-8.jpeg"> 
                    <img src="assets/images/gallery/gallery-8.jpeg" alt="" class="gallery-img" />
                </div>
                <div class="col-sm-6 col-md-4 gallery-item doctor" href="assets/images/gallery/gallery-9.jpeg"> 
                    <img src="assets/images/gallery/gallery-9.jpeg" alt="" class="gallery-img" />
                </div>
                <!-- gallery Image -->

            </div> <!-- end .row -->
        </div> <!-- end .gallery -->

标签： htmlgridoverflowgalleryjquery-isotope

解决方案

这与您的图像加载方式有关。我猜他们正在实时服务器上调用服务器，然后使用 JavaScript 将其注入 DOM。有多种方法可以解决此问题，但最简单的方法是在图像标签上添加宽度和高度属性。

推荐阅读