Question

以下代码（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的比例。

Answer 1

我不确定我理解你的问题，但是如果你只想让你的右侧div可滚动，那么将它添加到你的css

#bar{
   overflow: scroll;
}

Example

要回答您的第二个问题（垂直居中左侧图片），请将这些规则添加到vcenter班级

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

Example 2

使用CSS实现图像查看器

1 个答案: