Mit modal Bild in <div style="background-image: url()">

Ich versuche, mit modal Bild in meiner responsive website.
Ich habe meine Bilder in divs als hintergrund-Bild.
Wie;

<div class="someClass" style="background-image: url(image.jpg)"></div>

Habe ich überprüft w3schools.com: Wie - Modal Bilder

Jedoch, diese Methode ist nützlich, wenn ich <img> tag. Wie kann ich mit Modal Bilder, wo meine Bilder sind umgesetzt in divs?

Ich div da meine Webseite nicht richtig arbeiten kann, ohne dass es.

Dank.

  • Kannst du bitte mehr klar sein, was das problem ist
  • Welchen Teil hast du nicht verstanden??? Ich habe ein div, da ist ein hintergrund-Bild in es. Und ich möchte zeigen, dass Bild größer mit der Verwendung von Modal-Bild-Technik. Aber anstatt alle <img> tags, die ich brauche, um das Bild als "background-image" in <div>.
  • in einem solchen Fall müssen Sie geben Höhe & Breite für das div
  • div funktioniert, Bild funktioniert einwandfrei, alles funktioniert einwandfrei. Ich will nur klicken Sie auf das div und sehen Sie die vergrößerte version des Bildes in diesem div.
InformationsquelleAutor kylethedeveloper | 2017-01-21
  1. 0

    Geben die div class="someClass" eine Höhe und Breite und legen Sie die CSS-Eigenschaft background-size. Dadurch wird das Bild den gesamten Raum ausfüllen.

    https://jsfiddle.net/ebLxg8po/

    .someClass { 
  background: url(image.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 50%;
  width:80%;
}

    ref: https://css-tricks.com/perfect-full-page-background-image/

    InformationsquelleAutor jonnow
  2. 0

    Ich mein problem gelöst mit ein wenig Aufwand. Ich verwendet javascript, um es zu lösen. Ich habe auch Beschriftung auf meine Bilder. Ich bearbeitet die div-Klasse wie folgt aus:

    <div class="someClass" data-target="#myModal" data-toggle="modal" 
onclick='changeImage("image.jpg"); changeCaption("o");' style="background-image: url(image.jpg)"></div>

    Am Ende der Seite, ich habe meine modal;

    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                        <div class="modal-body">
                            <img src="" class="img-responsive" id="modalImg">
                            <p id="imgalt" class="caption"></p>
                        </div>
                </div>
        </div>
</div>

    So, wie Sie sehen, <img src> und <p> - tags leer sind. Ich fülle diese mit ein wenig javascript-code. Lassen Sie uns sehen, dass auch:

    <script type="text/javascript">
    function changeImage(a) {
        document.getElementById("modalImg").src = a;
    }

    function changeCaption(id) {
         var img = document.getElementById(id);
            if (id === "o") {
                document.getElementById("imgalt").innerHTML = " ";
            }
            else {
                document.getElementById("imgalt").innerHTML = id;
            }

    }
</script>

    Hier jede ID wirklich wichtig ist. Stellen Sie sicher, Sie Ihnen gleichen.

    So changeImage(a) - Funktion ändert sich das Bild. In meinem div-Tags, ich habe es zu öffnen "image.jpg".

    changeCaption(id) Funktion ändert die Beschriftung. Wenn Sie möchten, keine Beschriftung, schreiben Sie changeCaption("o"); wie schrieb ich in mein div-Klasse. Wenn Sie möchten, dass Ihre Beschriftung zu "Schöne Blumen", zum Beispiel, schreiben Sie changeCaption("Beautiful Flowers");.

    Ich hoffe, dass ich jemandem geholfen. Danke.

    • Hi @kylethedeveloper Sie denken, Sie können einfügen ein Turnschuh/funktionsfähige demo? Wird diese Arbeit, wenn Sie zufällig mehrere divs, die mit hintergrund-Stil? Ursache das ist mein Fall und ich bin mir nicht sicher, wo die modal
    • Ja, das wird perfekt funktionieren mit mehreren divs, die Sie hintergrund-Stil. Das ist, was ich habe auf meiner website. Ich werde versuchen, fügen Sie ein fiddle dazu.
    • in diesem Fall werden Sie noch brauchen, nur eine modale, obwohl Recht?
    • ja, du hast absolut Recht 🙂
    InformationsquelleAutor kylethedeveloper
  3. 0
    <i class="img img _2sxw" style="background-image: url('https\3a //static.xx.fbcdn.net/rsrc.php/v3/yd/r/g5B1Sl4zvO-.png?_nc_x\3d dNBJ7UMY9cl');background-repeat:no-repeat;background-size:100% 100%;width:332px;height:200px"></i>
    • Herzlich willkommen auf Stack Overflow. Bitte Bearbeiten Sie Ihre Antwort auf fügen Sie eine Erläuterung, wie diese beantwortet die Frage.
    InformationsquelleAutor joujou j ab
Schreibe einen Kommentar