zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bild soll im Div mit skallieren!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.01.2014, 10:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2014
Beiträge: 2
ioSoniX befindet sich auf einem aufstrebenden Ast
Standard 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!

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%);
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.01.2014, 11:22
Benutzerbild von Manfred62
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2009
Ort: Ludwigsburg
Beiträge: 2.135
Manfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nettManfred62 ist einfach richtig nett
Standard

Code:
#box-groesse img {
      height: auto;
      max-width: 100%;
    }
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.01.2014, 11:37
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.01.2014
Beiträge: 2
ioSoniX befindet sich auf einem aufstrebenden Ast
Standard

Moin Manfred62,

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

MfG
Mit Zitat antworten
  #4 (permalink)  
Alt 21.01.2014, 22:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

Soll das so aussehn? Edit fiddle - JSFiddle

MfG
Mit Zitat antworten
Antwort

Stichwörter
automatisch, bild, breite, css, css3, div, höhe, skalieren

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Bild links vom DIV und außerhalb des Textflusses DoktorW CSS 6 21.03.2009 15:58
Bild in Div positionieren mit Position saschaopp CSS 2 28.01.2009 11:40
3Spalten DIV die Bild überlappen + gleiche Höhe Suess CSS 2 01.02.2008 16:24
text und bild in einem div NEBEN-einander..? Holger (HMR) CSS 6 04.02.2005 19:02


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:44 Uhr.