實現使用CSS

下面的代碼（jsfiddle）的圖像瀏覽器實現圖像瀏覽器在CSS實現使用CSS

<!DOCTYPE html> 
<head> 
    <title>Trains, Planes, Automobiles, and Boats</title> 
    <meta charset="UTF-8"> 
    <style type="text/css" media="screen"> 
     html, body { background:#ddd; margin:0; padding:0; height:100%; } 
     #foo { position:absolute; left:5%; width:60%; top:5%; height:80%; background:#dcc; } 
     #bar { position:absolute; left:70%; width:25%; top:5%; height:80%; background:#cbd; vertical-align: middle; } 

     .fullwidth { width: 100%; vertical-align: middle; } 

     .vcenter { 
      display: block; 
      margin: 0 auto; 
     } 

    </style> 
</head> 
<body> 
    <div id="foo"> 
     <div class="vcenter"> 
      <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" /> 
     </div> 
    </div> 
    <div id="bar"> 
     <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/4703/ryanlerch-Steam-Train-Engine.png" /> 
     <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/19623/philrich123-A380.png" /> 
     <img class="fullwidth" src="http://openclipart.org/image/800px/svg_to_png/74557/rally-car.png" /> 
     <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/196201/Model-T-Ford.png&disposition=attachment" /> 
     <img class="fullwidth" src="https://openclipart.org/image/800px/svg_to_png/24418/Jarno-Boat-1.png&disposition=attachment" /> 
    </div> 
</body>

如何解決以下兩個錯誤？

bar一側不滾動。
foo一側的圖像未居中。其目的是使所有圖像在左側可見，同時在一個維度上（垂直/水平）填充其容器並在另一個（水平/垂直）中縮放以保持1：1的比例。

來源

2016-08-30 Calaf

我不知道我理解你的問題，但如果你只是想使你的正確的div滾動，然後添加到您的CSS

#bar{ 
    overflow: scroll; 
}

Example

要回答你的第二個問題（垂直居中左圖），添加這些規則，你vcenter類

position: relative; 
top: 50%; 
transform: translateY(-50%);

Example 2

來源

2016-08-30 17:37:43

'overflow：scroll;'是完全正確的，但第二部分僅在foo容器的寬度/高度小於圖像（平面）的寬度/高度時才起作用。如果foo的寬度/高度較大，則圖像會被裁剪。 – Calaf

根據你的代碼，左邊的圖像有他的'fullwidth'類，其中包含規則'width：100％'。在這種情況下，平面圖像將始終佔用左側div寬度的100％。 –

實現使用CSS

回答

相關問題