以下代码 ( jsfiddle ) 在 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 的比例。
最佳答案
我不确定我是否理解你的问题，但如果你只想让你的右 div 可滚动，那么将它添加到你的 css
#bar{
overflow: scroll;
}
要回答您的第二个问题(左图垂直居中)，请将这些规则添加到您的 vcenter 类
position: relative;
top: 50%;
transform: translateY(-50%);
关于css - 使用 CSS 实现图像查看器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39233720/