響應式居中圖像：垂直調整大小-不
[英]Responsive Centered Image: Vertical Resizing - NOT
問題描述
我以為我已經解決了這個問題，但是我想我還是沒有解決。 我正在嘗試以最少的CSS實現這一目標。
圖像居中，如果您水平或對角調整窗口大小（強調水平），一切都很好。
但是，如果只是垂直調整大小，則圖像大小將保持在其標稱高度，並添加滾動條。
我嘗試了最大高度，最大寬度，高度和寬度的各種組合，但是似乎沒有一個解決方案。
我的圖片的大小在最大1024像素的寬度和最大768像素的高度之間；
我的努力可以在
http://mclportal.net/AtLast/DeadCentre.html
#lightbox{ background: lightblue; padding: 0px; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } #slide{ background: #ffdb4c; /* height: 300px; */ position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } img { max-width: 800px; max-height: 600px; display: block; margin: auto; } Markup:
<body> <div id="lightbox"> <div id="slide"> <img src="http://lorempixel.com/800/600/" id="myImg"/> </div> </div>
我正在使用MAC Mountain Lion和最新的Firefox和Chrome進行測試
剛剛用SAFARI測試過，它在任何方向都沒有響應！
1 個解決方案
解決方案1
0 2014-11-23 20:49:33
這些方案的棘手部分是，最大寬度和高度必須動態變化，因為它們可以輕松適應不同的視口方向。 如果跨瀏覽器兼容性不是主要問題，則可以分別使用vmax和vmin單位進行圖像最大尺寸測量，以便無論視口方向如何，都強制圖像遵守視口邊界。
該技巧僅在以下情況下有效：
- 提供了對視口單位的瀏覽器支持-對於那些不支持視口單位的用戶，您可能必須考慮其后備
-
#lightbox容器具有相對於視口大小的尺寸（垂直和水平）。
#lightbox{ background: lightblue; padding: 0px; position: absolute; left: 0; top: 0; height: 100%; width: 100%; } #slide{ background: #ffdb4c; /* height: 300px; */ position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } img { max-width: 80vmax; max-height: 80vmin; display: block; margin: auto; }
<div id="lightbox"> <div id="slide"><img src="http://lorempixel.com/800/600/" id="myImg"/></div> </div>
垂直居中的響應容器中的響應圖像
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.