0

我正在尝试创建一个全屏、适合移动设备的主题，该主题可以尽可能大地显示帖子的特色图片，而无需裁剪。这意味着在横向显示它们height:100%; width:auto;，但在纵向显示它们width:100%; height:auto。（与许多 iOS 应用程序一样。）

麻烦的是，我真的很想在 WordPress 中使用它。当我将主题开发为静态 HTML 测试站点时，一切正常。但由于某种原因，当我将网站转换为主题时，它开始忽略纵向中的宽度：100%。

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

最初，我认为 WordPress 的内联图像尺寸已经覆盖了我的响应式尺寸（这是有道理的，级联方式），但情况似乎并非如此，因为图像在横向视口中的 height:100% 显示效果很好。在纵向中，它似乎在听 height:auto 命令。

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

我还添加了max-width: 100%一个很好的措施，并在各个地方使用 !important 进行了尝试。没有效果。

这是代码，因此您可以看到它不是一个愚蠢的缺少分号。

#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 -->

&这里有一些截图。

在此处输入图像描述

在此处输入图像描述

拜托，哦拜托，有人把我从肖像问题中解救出来。

4

2 回答 2

0

试试这个，可能...

在这部分给出这个<head />。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
于 2013-01-12T03:02:21.200 回答
0

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

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

于 2013-01-14T13:37:51.027 回答