CSS - werde ich niemals verstehen

Hi Leute, ich bräuchte mal Hilfe von Euch Profis. Ich möchte ein Bild als Hintergrund. In diesem Bild sind Rahmen und in diese Rahmen sollen andere Bilder per Button eingeblendet werden. Und wenn man das im Handy anschaut, soll das natürlich auch alles an den Positionen sein nur halt in klein. Kann mir da jemand von Euch helfen? Bei Google hab ich nichts passendes gefunden, was sich auf die Schnelle realisieren ließe. Oder ich war einfach nur zu doof - aber das Zeug ist so komplex geworden, da bin ich wohl schon zu alt dafür Bild

Der hier verwendete Code

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <style> #wrapper{ background:black; height:1000px; width:1000px; } #bconti{ position:relative; top:300px; vertical-align:middle; text-align:center; display:flex; } #bild1{ margin-left:42.5px; height:400px; width:250px; border:10px solid yellow; background:#abcdef; } #bild2{ margin-left:42.5px; height:400px; width:250px; border:10px solid yellow; background:violet; } #bild3{ margin-left:42.5px; margin-right:42.5px; height:400px; width:250px; border:10px solid yellow; background:#feecba; } #buttoncon{ position:relative; top:350px; text-align:center; } #button1{ margin-right:170px;; height:40px; font-size:30px; text-align:center; width:200px } #button2{ height:40px; font-size:30px; text-align:center; width:200px } #button3{ margin-left:170px; height:40px; font-size:30px; text-align:center; width:200px } img{ width:100%; height:100%; } /* EOS */ </style> </head> <body> <bod> <div id="wrapper"> <div id="bconti"> <div id="bild1"> </div> <div id="bild2"> </div> <div id="bild3"> </div> </div> <div id="buttoncon"> <button id="button1"> Bild1 </button> <button id="button2"> Bild2 </button> <button id="button3"> Bild3 </button> </div> </div> </bod> <script> $('#button1').click(function(){ link1="http://bilder.bild.de/fotos/lachsack-36229038/Bild/1.bild.jpg"; $('#bild1').html('<img src="'+link1+'">') }); $('#button2').click(function(){ link2="http://img1.gbpicsonline.com/gb/86/001.gif"; $('#bild2').html('<img src="'+link2+'">') }); $('#button3').click(function(){ link3="http://bilder.bild.de/fotos/lachsack-36229038/Bild/1.bild.jpg"; $('#bild3').html('<img src="'+link3+'">') }); </script> </body> </html>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!