試圖根據窗口大小縮放圖像寬度/高度，同時還將圖像置於第

嘿，我不是一個程序員，只是試圖破解我的投資組合網站以顯示一些圖像。我希望頁面上的圖像居中，但也只是根據窗口寬度/高度的大小縮小尺寸（而不是縮小）。試圖根據窗口大小縮放圖像寬度/高度，同時還將圖像置於第

我一直在搜索論壇整天，大多數的例子太困惑，因爲我不是程序員。我幾乎可以用下面的代碼獲得功能，但圖像總是附加到頁面的頂部，根據窗口大小在它下面留下了很多醜陋的空白區域。任何幫助將非常感謝，幾乎堅持在這一點上。嘗試在單擊縮放圖標之前在firefox中查看時實現此頁面的功能，但無法弄清楚。 http://www.tatianart.com/adriana_final_face_composite.jpg

在CSS文件

html { margin:0; padding:0; height:100%; width: 100%; } 
body { margin:0; padding:0; width:100%; height:100%; background:#171717; } 
.wrapper { height:100%; width: 100%; padding-top:0%; padding-bottom:0px; text-align:center; background:#171717; } 
.large_image { height:100%; width: 100%; } 
.large_image img { max-height:100%; max-width:100%; width:auto; vertical-align:middle;}

我的HTML頁面

<body> 
<div class="wrapper"> 
<main id="main" role="main" class="large_image"> 
<img src="joyrideturbo\test.jpg"> 
</main> 
</div> 
</body> 
</html>

來源

2014-12-22 malcolm341

請與本替換你的CSS：

.wrapper {position: absolute; display: table; height:100%; width: 100%; padding-top:0%; padding-bottom:0px; text-align:center; background:#171717; } 
.large_image {position: absolute; display: table-cell; vertical-align: middle; height:100%; width: 100%; } 
.large_image img { max-height:100%; max-width:100%; width:auto;}

我讓包裝認爲這是桌子，而主要行爲作爲表格單元格。這允許內容垂直居中。

來源

2014-12-22 03:02:34 Mouser

Mouser的嗨，我給一個嘗試修復圖像的中心，但現在的圖像不再進行調整以適合窗口。還有其他建議嗎？ – malcolm341

奇怪，它似乎使圖像變大。與您的CSS呈現完美，但有酒吧。隨着我的它溢出。 – Mouser

是的，我想避免溢出，但仍然得到中心。 – malcolm341

好吧，經過4個小時的黑客攻擊和嘗試不同的事情後，我得到了部分解決方案。圖像仍然不會垂直縮放，但所有其他功能都可以正常工作，並且圖像現在可以正確居中並在全屏中看起來正確。如果有人想知道如何讓圖像垂直縮小，請讓我知道。

HTML

<body> 
<img src="joyrideturbo/test.jpg" style="width: 100%" /> 
</p> 
</body>

CSS

html, body {background-color:#171717;} 
body 

img { 
position: absolute; 
top: -5px; bottom:0; left: 0; right:0; 
margin: auto; 
} 

/*always show vertical scroll bar*/ 
html {overflow-y: scroll;}

來源

2014-12-22 08:37:33 malcolm341

奧凱終於得到了它！我發佈了第二個答案，因爲上面的代碼實際上創建了一個不同的影響，其中圖像放大以匹配在某些情況下可能需要的窗口大小。任何方式，終於通過試驗和錯誤得到這個工作。當拖動窗口垂直/水平時，圖像居中並縮放比例越大/越大，只將圖像縮放到源藝術的最大大小。垂直滾動條總是存在，所以當從圖庫頁面轉換爲全尺寸圖像時，它們不是流行的。

HTML

<body> 
<div class="large_image"> 
<img src="joyrideturbo\test.jpg"> 
</div> 
</body>

CSS

body { margin:0; padding:0; width:100%; height:100%; background:#171717; } 
.large_image img { 
max-height:100%; 
max-width:100%; 
width:auto; 
position: absolute; 
top: -5px; bottom:0; left: 0; right:0; 
margin: auto; 
} 

/*always show vertical scroll bar*/ 
html {overflow-y: scroll;}

來源

2014-12-22 17:09:06 malcolm341

試圖根據窗口大小縮放圖像寬度/高度，同時還將圖像置於第

回答

相關問題