CSS / RWD - 列中的图像未正确加载

Question

我刚刚将一个wordpress网站移动到一个实时服务器，我正在审查不同的屏幕宽度。除了在纵向模式下的ipad上的工作人员图像外，一切看起来都很好 -

在开发过程中，总有四个人员图像，但是在网站从localhost迁移到live之前，这个图像已经减少到三个。您可以看到网站here。它需要在顶部堆叠两个图像，在右边堆叠两个图像。不确定为什么它会将一张图像切成两半。

以下是相关代码 -

HTML / PHP的

<div class="staff">
                            <div class="masonry">            
                                <div class="brick">  
                                        <?php if( get_field('whoweare_image1') ): ?>
                                        <img src="<?php the_field('whoweare_image1'); ?>" />
                                    <?php endif; ?>
                                    <div class="details">     
                                        <span id="info">  
                                            <h3><?php the_field('whoweare_name1'); ?></h3>  
                                            <p><?php the_field('whoweare_text1'); ?></p>  
                                        </span> 
                                    </div>     
                                </div>

                 <!-- above code repeated for each image container -->

                            </div>
                </div>

的style.css

.staff .masonry { 
    column-count: 3;


}

@media only screen and (min-width: 480px) and (max-width: 750px)  {
     .staff .masonry {

      -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }


}

@media only screen and (min-width: 750px) and (max-width: 960px) {



     .staff .masonry {

      -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }


}

Answer 1

.brick看起来有display: inline-block，但.staff .brick（具有更高的特异性）被display: flex覆盖。在您的媒体查询中，您只能以最大尺寸添加display: flex，并且应该达到您想要的效果。