我正在尝试创建一个全屏、移动友好的主题，它显示帖子的特色图片，尽可能大，不裁剪。这意味着在横向显示它们时 height:100%; width:auto;，但纵向显示它们 width:100%;高度:自动。 (与许多 iOS 应用一样。)
麻烦的是，我有一段时间真的很讨厌让它在 WordPress 中工作。当我将主题开发为静态 HTML 测试站点时，一切正常。但出于某种原因，当我将网站转换为主题时，它开始忽略 width:100% in portrait。
我知道被破坏/被忽略的不是媒体查询本身，因为在同一个纵向媒体查询中的导航菜单工作正常。
最初我认为 WordPress 的内联图像大小已经覆盖了我的响应式图像大小(这是有道理的，级联方式)但情况似乎并非如此，因为图像在横向视口(viewport)中以 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 -->
& 这是一些截图。
拜托，哦拜托，有人把我从我的肖像问题中解救出来。
最佳答案
试试这个，可能是...
在 <head /> 中给出这个部分。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
关于css - 宽度 : 100% not working in portrait on Featured Image in Custom Theme，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14269781/