首页 文章

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

提问于
浏览 次
0

我正在尝试创建一个全屏，移动友好的主题，显示特色图片的帖子尽可能大，没有裁剪 . 这意味着在横向显示它们 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

enter image description here

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

css wordpress wordpress-theming

2 回答

  • 0

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    回复于
  • 0

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

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

    回复于

相关问题