Question

我正在尝试创建一个全屏，移动友好的主题，显示特色图片的帖子尽可能大，没有裁剪。这意味着在横向显示height:100%; width:auto;，但在纵向显示width:100%; height:auto。（与许多iOS应用程序一样。）

麻烦的是，我有一个真正的错误，有时间让它在WordPress中工作。当我将主题开发为静态HTML测试网站时，一切都运行得很好。但出于某种原因，当我将网站转换为主题时，它开始忽略宽度：纵向为100％。

我知道不是媒体查询本身被破坏/被忽略，因为同一肖像媒体查询中的导航菜单工作正常。

最初我认为WordPress的内联图像大小已经覆盖了我的响应图像（这是有意义的，级联方式）但似乎并非如此，因为图像在高度上显示正常：在横向视口中为100％。在肖像中，它似乎是在听高度：自动命令。

它实际上只是被忽略的width: 100%;命令。

我还添加了max-width: 100%只是为了好的措施，并尝试了！在各个地方都很重要。没效果。

这是代码，所以你可以看到它不是一个愚蠢的缺失分号。

#content img {
width:100%;
max-width:100% !important;
height:auto;
}

我也验证了我的CSS，似乎没有任何错误。

这是HTML

<div  id="content">                 
               <div title="Click to flip" class="sponsor">

                    <div class="sponsorFlip">
                        <?php 
                            if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
                              the_post_thumbnail();
                            } 
                        ?>

                    </div>

                    <div class="sponsorData" style="display:none">
                    <?php 
                        if( class_exists( 'kdMultipleFeaturedImages' ) ) {
                        kd_mfi_the_featured_image( 'featured-image-2', 'post' );
                        }
                    ?>      
                    </div>

                </div>
            </div><!-- End div #content -->

＆安培;这是一些截图。

enter image description here

拜托，拜托，有人救了我的肖像问题。

Answer 1

试试这个，可能是......

在<head />部分中提供此内容。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Answer 2

所以我现在基本上已经解决了这个问题，因为我已经按照我想要的方式工作了 - 但是我真的不明白它为什么会起作用。

我删除了纵向媒体查询，因此默认设置为纵向，然后有条件地将横向内容留在那里。将肖像和横向媒体查询放在同一文档中是否有问题？我似乎无法在网上找到任何关于它的信息，而且当我将网站转换为wordpress模板时，我确信我只遇到了这个问题。

宽度：100％无法在自定义主题中的特色图像上纵向工作

2 个答案:

试试这个，可能是......