0

我有一个关于最后阶段的照片博客，这是我正在努力解决的最后一个问题。布局在右侧有固定的菜单栏，内容在右侧流动。当照片从图库页面打开到它自己的页面时，它应该被调整大小，以便任一侧不超过（例如）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/但如果按原样实施，它会破坏布局。

4

2 回答 2

0

我让它工作了……有点。我做了一个精简的测试页，它可以工作：

http://tomiphotography.com/wp-content/themes/Photomi/Test/post-2.html

但是，当我在主 WP 页面中使用相同的 css 时，图像比例变得混乱，图像没有居中？？？？：

http://tomiphotography.com/?p=176

:(

知道 WP 中可能会覆盖一些 CSS 吗？

HTML：

<body>

<div id="wrapper">
  <div id="left_column">
  </div>

  <div id="right_column_post">

      <div id="post_container">

            <img src="http://tomiphotography.com/wp-content/uploads/2013/04/Ruka-viimeinen.jpg"/>


    </div>

  </div>

</div>

</body>

CSS：

 html {
    height: 100%;
    padding:0;
    margin:0;
}

body {
    background-color: #000000;
    height: 100%;
    padding: 0;
    margin: 0;

    background: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom left;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#wrapper {
    float: left;
    height: 100%;
    width:100%;
    padding:0;
    margin:0;
}


#left_column {
    position: fixed;
    top: 0;
    bottom: 0; 
    left: 0;
    z-index:100;
    width: 240px; 
    height: 100%;
    overflow: hidden; 
    background-color:#ff0000;

}


#right_column_post{
    height: 100%;
    width:auto;
    margin-left:240px;
    position: relative;
}

#post_container  {
  position:fixed !important;
  position:absolute;
  margin:auto;
  text-align:center;
  top:8%;
  right:80px;
  bottom:10%;
  left:320px;
}
#post_container img {
    max-width:100%;
    max-height:100%;    
    padding:4px;
    background-color:#fff;
}
于 2013-04-20T18:18:39.700 回答
0

我不确定您实际上在寻找什么，但是如果您想以纵横比调整图像大小，则不要同时提供最大宽度和最大高度，如果您这样做，那么它会在某个时候失去其纵横比。

你可以给宽度：100%；

在这里我以百分比给出宽度

    #left_column {
    position: fixed;
    top: 0;
    bottom: 0; 
    left: 0;
    z-index:100;
    width: 40%;
    height: 100%;
    overflow: hidden;
    background:red;

}

#right_column_post{
    height: 100%;
    width:50%;
    margin-left:45%;
    position: relative;
}


#post_container {
    width:90%;
    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{
    width:100%;
    max-width:100%;
    display: block;
    vertical-align: middle;
    margin:0 auto;
    position:relative;
}

检查此链接：/新链接/

http://jsfiddle.net/madhuri2987/jcAGj/2/

希望这就是你要找的。

于 2013-04-18T05:18:03.107 回答