調整圖像大小保持比例

我在最後一個階段有一個照片博客，這是我正在努力解決的最後一個問題。佈局右側有固定的菜單欄，內容在右側流動。當照片從相冊頁面打開到它自己的時候，它應該調整大小，以便任何一面都不會超過（例如）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 user2264516

你是什麼意思 – 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/

希望這是什麼ü正在尋找。

來源

2013-04-18 05:18:03 itsMe

謝謝，但這並不完全。當窗口調整到足夠寬的範圍時，內容將變爲可滾動並且圖像不居中。我其實有寬度：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; 
}

來源

2013-04-20 18:18:39 user2264516

調整圖像大小保持比例

回答

相關問題