所以我试图显示图像尽可能大,没有裁剪任何屏幕尺寸。这意味着身高: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”>宽度。这应该处理的问题,我会想。