Question

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

Answer 1

我不确定你究竟在寻找什么，但是如果你想在宽高比上调整图像大小，那么不要同时给出max-width和max-height，如果你这样做，那么在某一点它会松开它的方面比。

你可以给宽度：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;
}

检查此链接： / NEW LINK /

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

希望这就是你要找的东西。

Answer 2

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

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;
}

调整图像大小，保持两种尺寸的比例

2 个答案: