调整图像大小保持比例

问题描述：

我在最后一个阶段有一个照片博客，这是我正在努力解决的最后一个问题。布局右侧有固定的菜单栏，内容在右侧流动。当照片从相册页面打开到它自己的时候，它应该调整大小，以便任何一面都不会超过（例如）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

答

我不确定你实际上在找什么，但是如果你想调整图像的高宽比，那么不要给最大宽度和最大高度两个，如果你这样做，那么在某一点它会松动它长宽比。

u可以给出宽度：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/

希望这是什么ü正在寻找。

谢谢，但这并不完全。当窗口调整到足够宽的范围时，内容将变为可滚动并且图像不居中。我其实有宽度：100％;和高度：自动;但我似乎发布了一些测试代码。 – user2264516 2013-04-18 05:25:00

新的链接仍然有同样的问题。当视口足够宽时，内容可以滚动。 – user2264516 2013-04-18 05:57:09

像这里一样，但高度应设置为80-70％： http://pexetothemes.com/demos/expression_wp/portfolio/kids-in-nature/ – user2264516 2013-04-18 05:59:57

答

我得到它的工作...种。我做了一个精简的测试页面，它的工作原理：

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

但是当我使用完全相同的CSS主WP页面的图像比进入疯狂和图像不居中????：

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

调整图像大小保持比例

相关推荐