響應中心圖像：垂直調整大小 - 不是

我以爲我已經理清了如何做到這一點，但我想我仍然沒有管理它。我試圖用最小的CSS來實現這一點。響應中心圖像：垂直調整大小 - 不是

圖像居中，如果您調整窗口水平或對角（強調水平），一切都很好。

但是，如果您只是垂直調整大小，則圖像大小將停留在其標稱高度並添加滾動條。

我已經嘗試了最大高度，最大寬度，高度和寬度的各種組合，但沒有一個似乎解決了它。

我的圖片在寬度最大爲1024px和最大高度爲768px之間的各種尺寸;

我的努力可以在

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山獅測試和最新的Firefox和Chrome

只是SAFARI測試中可以看出和它在任何方向都不響應！

來源

2014-11-23 mcl

'＃slide'需要'高度：100％'和'img'需要'最大高度：100％' – esswilly 2014-11-23 20:31:39

現在的調整隻能垂直不是水平方向和垂直中心已經走了。 – mcl 2014-11-23 20:50:53

這些場景中棘手的部分是，您的最大寬度和高度必須是動態的，因爲它們可以很容易地適應不同的視口方向。如果crossbrowser兼容性不是主要問題，則可以分別使用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>

來源

2014-11-23 20:49:33 Terry

響應中心圖像：垂直調整大小 - 不是

回答

相關問題