Moin,
ich bin an einer Sache dran und hänge schon seid gestern Abend dran. Ich habe mit hilfe von CSS3 eine Lightbox erstellt. Wenn man auf das Thumbnail klickt, wird das Bild in voller Größe angezeigt und der Hintergrund abgedunkelt (noch ohne animation).
Jetzt aber zu meinem Problem.
Wenn ich die Lightbox öffne durchs klicken des Thumbnails, soll ein Div das Bild umschließen. Dieses Bild soll sich mit dem Div skalieren. Ich will z.B. die Div-Box als full-screen sprich 100% haben, dann soll das Bild mit skalieren. Wenn ich eine Breite von 20% und eine Höhe 60% oder andersrum, soll das Bild die Div-Box trotzdem ausfüllen.
Ich hänge noch den Quelltext für mein HTML-und CSS Dokument hinten dran!
Wie kriege ich das hin, ich bin am verzweifeln!
Danke im Vorraus!
HTML-Code:
<html>
<head>
<title>Lightbox</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="lightbox.css">
</head>
<body>
<a href="#bild1"><img src="images/thumb1.jpg" /></a>
<a href="#start" class="modal" id="bild1" ><div id="box-groesse"><img src="images/bild1.jpg" /></div></a>
</body>
</html>
Code:
.modal {
background: rgba(0, 0, 0, 0.5);
display: none;
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
}
.modal:target {
display: block;
position: absolute;
}
.modal img {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}
#box-groesse {
border: 1px solid #000000;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
15.01.2014, 09:53
Bild soll im Div mit skallieren!
Ähnliche Themen
Linear-Darstellung
