XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Bild soll im Div mit skallieren! (http://xhtmlforum.de/showthread.php?t=70514)

ioSoniX 15.01.2014 10:53

Bild soll im Div mit skallieren!
 
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! :twisted:

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%);
}


Manfred62 15.01.2014 11:22

Code:

#box-groesse img {
      height: auto;
      max-width: 100%;
    }


ioSoniX 15.01.2014 11:37

Moin Manfred62,

hat super geklappt. Hätte ich aber auch mal selber drauf kommen können! :oops:

MfG

gabischatz 21.01.2014 22:51

Soll das so aussehn? Edit fiddle - JSFiddle

MfG


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:48 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023