Implementierung eines Bildbetrachter mit CSS

Der folgende Code (jsfiddle) implementiert ein Bildbetrachter in CSSImplementierung eines Bildbetrachter mit 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>

Wie kann ich die folgenden zwei Fehler zu beheben?

Die bar Seite scrollt nicht.
Das Bild in der foo Seite ist nicht zentriert. Die Absicht ist, das gesamte Bild auf der linken Seite sichtbar zu machen, während es seinen Behälter in einer Dimension (vertikal/horizontal) füllt und in der anderen (horizontal/vertikal) skaliert wird, um im Verhältnis 1: 1 zu bleiben.

Quelle

2016-08-30 Calaf

Ich bin mir nicht sicher, ob ich Ihre Frage verstanden, aber wenn Sie Ihr Recht div scrollbaren machen will, dann diese zu Ihrem CSS hinzufügen

#bar{ 
    overflow: scroll; 
}

Example

Ihre zweite Frage zu beantworten (vertikal Zentrieren das linke Bild), fügen Sie diese Regeln zu Ihrer vcenter Klasse

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

Example 2

Quelle

2016-08-30 17:37:43

Der 'overflow: scroll;' ist genau richtig, aber der zweite Teil funktioniert nur, wenn der foo Container eine Breite/Höhe hat, die kleiner ist als die des Bildes (der Ebene). Wenn die Breite/Höhe von foo größer ist, wird das Bild abgeschnitten. – Calaf

Entsprechend Ihrem Code hat das linke Bild die Klasse 'fullwidth', die die Regel' width: 100% 'enthält. In diesem Fall nimmt das Ebenenbild immer 100% der linken Div-Breite ein. –

Implementierung eines Bildbetrachter mit CSS

Antwort

Verwandte Themen