我在最后一个阶段有一个照片博客,这是我正在努力解决的最后一个问题。 布局右侧有固定的菜单栏,内容在右侧流动。当照片从相册页面打开到它自己的时候,它应该调整大小,以便任何一面都不会超过(例如)70%的可用空间。但不仅如此。它也应该保持在正确的内容div的水平和垂直中心。 此时一切正常,除非图像是通过屏幕的肖像。调整图像大小保持比例
这是可能实现的只有CSS取悦少数百分之有JS未激活? 如果不是,那么这不是一个交易断路器。
的HTML:
<div id="wrapper">
<div id="left_column">
</div>
<div id="right_column_post">
<div id="post_container">
<img src="img.jpg" width="1000" height="750"/>
</div>
</div>
</div>
的CSS:
#left_column {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index:100;
width: 240px;
height: 100%;
overflow: hidden;
}
#right_column_post{
height: 100%;
width:auto;
margin-left:240px;
position: relative;
}
#post_container {
width:100%;
height:100%;
display: block;
vertical-align: middle;
text-align:center;
}
#post_container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
#post_container img{
max-width:70%;
height:auto;
display: inline-block;
vertical-align: middle;
margin:auto;
position:relative;
}
这是接近:http://jsfiddle.net/jcAGj/但它会打破,如果实现的布局。
你是什么意思 – 2013-04-18 05:00:56
我指的是图像使屏幕滚动。该图像比“视口”大(右边的单词?) – user2264516 2013-04-18 05:08:21
我无法在您的演示中重现 – 2013-04-18 05:08:56