kostenloser Webspace werbefrei: lima-city

Bild-Container Drag'N'Drop

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   8:35, 24.2.2015

   Moin
   Ich würde gerne einen tag/container">Container mit einem Bild haben, in dem man über einen Button 1-4 div Boxen hinzufügen kann. Diese dürfen nicht miteinander kollidieren. Der Container soll in der Breite verändert werden können, also am Design angepasst über CSS, die Höhe soll dabei behalten werden.
   
   Jetzt bin ich mir nicht sicher; Löse ich das über ein img Tag oder background-image im div? Beim HTML Tag wär der Vorteil, dass die Höhe automatisch angepasst wird, beim background-image stosse ich auf Probleme. Und zwar wird die Höhe nicht automatisch angepasst und ich weiss nicht, was ich übersehe. Da das Endprodukt sowieso nicht ohne JS laufen wird, könnte ich die Höhe auch mit JavaScript anpassen.
   
   Die andere Möglichkeit wär wie schon erwähnt der IMG Tag.
   
   Im Container sollen jetzt diese Divs sein. Um es zu vereinfachen, trage ich sie mal händisch ein. Hier ein Beispiel, wie es sein sollte. Nur bin ich mit der Lösung nicht zufrieden. Das ist alles ein Gemurkse. Vom CSS, IMG Tag bis zum JavaScript.
   
   Die Grösse der Divs würde dann aber sowieso mit JavaScript definiert werden, da diese, wie bereits schon erwähnt vom User in den Container eingefügt werden können. Das Background Image sollte auch leicht austauschbar sein, sodass sich dann die Höhe auch gleich anpasst.
   
   Hat da jemand bessere Ideen?
   
   Beitrag zuletzt geändert: 24.2.2015 16:55:28 von c143

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. lumix

   lumix hat kostenlosen Webspace.

   17:02, 23.3.2015

   Hi c143
   
   Vielleicht hilft dir dieses Code-Beispiel von mir etwas weiter, ich habe das an dein Post-JSFiddle-Probleme angelehnt.
   
   

   <style>
   div#image-container{
       position: relative;
       background: url('http://www.lima-city.de/images/community_logo.png');
       background-size: cover;
       background-repeat: no-repeat;
       border: 1px solid red;
   }
   </style>
   
   <div id="image-container"></div>
   
   <script>
   var myDiv, myBackImage;
   
   function setDivSizePropToImage() {
       var imgWidth, imgHeight;
       imgWidth = myBackImage.naturalWidth;
       imgHeight = myBackImage.naturalHeight;
       myDiv.style.width = imgWidth + 'px';
       myDiv.style.height = imgHeight + 'px';
       alert('Original-Bildgroesse(Width/Height): ' + imgWidth + 'px / ' + imgHeight + 'px');
   }
   
   function initByWinOnLoad() {
       myBackImage = new Image();
       myBackImage.onload = setDivSizePropToImage;
       myDiv = document.getElementById('image-container');
       myBackImage.src = window.getComputedStyle(myDiv, null).getPropertyValue("background-image").replace('url(', '').replace(')', '');
   }
   
   initByWinOnLoad();
   </script>

   
   
   MLG lumix

4. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?