所以我试图显示图像尽可能大，没有裁剪任何屏幕尺寸。这意味着身高：100％; width：auto in landscape and width：100％; height：自动纵向。
我提供的图像，足够大，以填补视网膜iPad，所以几乎每个屏幕尺寸将缩放图像。它在每个浏览器和方向，除了Internet Explorer& Firefox在横向模式，让它们太大，几乎每个屏幕。这只是在景观，记住你。
代码的相关位为：
<style type="text/css">
#container {position:absolute; top:0; left: 0; right: 0; bottom:0; display: block;}
#content {
text-align: center;
margin: 0px;
font-size:0;
position: absolute;
top:0; left: 0; right: 0; bottom: 0
}
#content:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.sponsor {
display: inline-block;
vertical-align: middle;
}
#content img {
max-width: 100%;
width: 100%;
height:auto;
}
@media all and (orientation: landscape) {
#main {
top:0;
display: block;
width: 100%;
height: 100%;
margin:0px auto;
text-align:center;
}
#content img {
height:100%;
width:auto;
max-width:auto !important;
max-height:100%;
display:block;
margin:0 auto;
}
}
</style>
<div id="content">
<?PHP if (has_post_thumbnail( $post->ID ) ): ?>
<?PHP $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'single-post-thumbnail' ); ?>
<div title="Click to flip" class="sponsor">
<a href="#" class="img-link">
<img src="<?PHP echo $image[0]; ?>" alt="" class="feat-1" style="display: block;" />
</a>
<a href="#">
<img src="<?PHP echo kd_mfi_get_featured_image_url('featured-image-2','post','full'); ?>" alt="" class="feat-2" style="display: none;" />
</a>
</div><?PHP endif; ?>
</div><!-- End div #content -->
我不太喜欢比老IE9，但理想的是想服务一切。然而，只要我可以服务IE9& Firefox我会很高兴。
哦，顺便说一下 – Firefox中的检查器告诉我，宽度：100％的规则是遵循，但显然不是。
提前谢谢了！
解决方法
你有最大宽度：100％，但100％的什么？在父宽度，对吧？但是父类是一个内联块(with class =“sponsor”)，其宽度未设置，因此其宽度取决于子项，特别是子项的首选宽度。
CSS样式中的布局在CSS规范中未定义。特别地，在这种情况下，孩子的内在宽度取决于父母的宽度，父母的宽度又取决于孩子的内在宽度。有关规范文本请参见http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float，并注意所有“不定义”位。
我建议你给你的< div class =“sponsor”>宽度。这应该处理的问题，我会想。
