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

Question

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

在开发过程中总共有四个工作人员图像，但在网站从localhost迁移到现场之前，这已经减少到三个。你可以看到网站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，并且应该达到您想要的效果。