所以我试图在任何屏幕尺寸上都显示尽可能大的图像,而不进行裁剪。这意味着 height: 100%; width: auto
in landscape
and width: 100%;高度:
。纵向
中的自动
我提供的图像大到足以填满视网膜 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 中的 Inspector 告诉我正在遵循 width:100%
规则,但显然没有。
非常感谢!
最佳答案
你有 max-width: 100%
,但是 100% 的是什么? parent 的宽度,对吧?但是父级是一个内联 block (class="sponsor"),其宽度未设置,因此其宽度取决于子级,尤其是子级的首选宽度。
此样式的布局在 CSS 规范中未定义。特别是,在这种情况下, child 的固有宽度取决于 parent 的宽度,而 parent 的宽度又取决于 child 的固有宽度。参见 http://www.w3.org/TR/CSS21/visudet.html#shrink-to-fit-float对于相关的规范文本,请注意所有“未定义”位。
我建议您提供 <div class="sponsor">
宽度。我认为这应该可以解决问题。
关于css - 图像神秘地忽略了 Firefox 和 IE 中的最大宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14550356/