<img>最大高度不起作用

我需要在窗口的中心（水平和垂直方向）顯示一個圖像（並且可能在其附近有一些控件），同時在較大時縮小到屏幕高度（我擁有的所有圖像都是垂直的，所以我不關心它們的寬度）。底層內容必須隱藏背景。代碼應該在瀏覽器中工作，從Internet Explorer 8開始。<img>最大高度不起作用

我設法實現了除後者之外的所有功能 - 縮小屏幕高度，這是我遇到的問題。

這裏是我試圖執行它（放入子句具有低於生成的代碼）：

我把一切都在一個塊中具有固定的定位和100％設置爲它的寬度和高度 - 爲它填充整個窗口區域。成功的。
我使用表來垂直居中圖像，所以我把它的高度設置爲100％。成功的。
在單元格內部放置圖像。

3a。當它的高度小於屏幕尺寸時，圖像垂直放置在中央。成功的。

3b。我將圖片的最大高度設置爲100％，以使其適合屏幕。 Unsucsessful！圖像將窗口分開爲實際高度（除了令人驚訝的IE外）。

是否有可能解決描述的任務，我做錯了什麼？

（我的代碼:)

view at jsfiddle

<!DOCTYPE HTML> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css"> 
</head> 
<body> 

    <div class="photoshow"> 
     <table> 
      <tr> 
       <td> 
        <img src="http://s14.postimg.org/e9kwvq2m9/1031_1.jpg"> 
       </td> 
      </tr> 
     </table> 
    </div> 

</body> 
</html>

CSS：

.photoshow { /* the containing block */ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    background: pink; /* hiding the underlying content */ 
    } 

    .photoshow table { 
     height: 100%; 
     margin-left: auto; margin-right: auto; /* to center horizontally */ 
     } 

     .photoshow td { 
      height: 100%; 
      vertical-align: middle; 
      background: yellow; /* just for visual indication */ 
      } 

      .photoshow img { 
       max-height: 100%; 
       }

來源

2014-04-17 1234ru

我不能讓你，你想要什麼？ – 4dgaurav

@Gaurav，我想大圖像適合窗口高度 – 1234ru

你的意思是你需要完全適合你的窗口高度而不關心它的寬度？你想保留寬高比嗎？ – 4dgaurav

DEMO

.photoshow .big { 
    position:fixed; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:auto; 
    height:100%; 
    max-height:300px; 
}

來源

2014-04-18 05:03:41 4dgaurav

這需要用特定的類標記特定的圖像。不通用。 – 1234ru

<img>最大高度不起作用

回答

相關問題