Probleme mit box-sizing: border-box bei Bildern
Hallo Leute
ich habe leider enorme Probleme mit box-sizing: border-box bei Bildern. Ich möchte meine Bilder mit einem Rahmen und mit einem Innenabstand (padding) versehen. Außerdem möchte ich es so haben, dass meine Bilder eine Breite von höchstens 100 % haben, wobei die Breite den Rand und den Innenabstand beinhaltet. Und da habe ich mir gedacht, dass das Ganze am besten mit box-sizing: border-box zu lösen ist. Da ich aber bei meinen Bildern den Quelltext zu Höhe und Breite angegeben habe, gibt es Probleme. Mein Bild (oben auf Beispiel ) hat eine breite von 1000 Pixel und eine Höhe von 200 Pixel. Nun soll dieses Bild einen Rand von einem Pixel Stärke und einen Innenabstand von 99 Pixel haben. (Zweites Bild auf Beispiel ) damit das Bild nun inklusive Frontrand und in den Abstand höchstens eine Breite von 100 % besitzt, habe ich beim dritten Bild auf Beispiel in der CSS box-sizing: border-box ergänzt, ob man nun hat das Bild selbst in der Höhe nur noch 100 Pixel. Die Gesamthöhe von Bild, Rand und Innenabstand beträgt 200 Pixel. Also genau die 200 Pixel, welche den Quelltext hinterlegt sind. Ich möchte aber unbedingt im Quelltext die Angabe zur Höhe und Breite haben, weil das den Seitenaufbau beschleunigt bzw. der Seitenaufbau verlangsamt wird, wenn diese Angaben nicht vorhanden sind. Wie löse ich den dieses Problem am besten? |
Hi, So richtig verstehe ich deine Frage nicht.
Mit box-sizing:border-box; legen height und width nicht mehr die Maße des Inhalts eines Elements, sondern die Maße des Elements selbst fest und berücksichtigt dabei Rahmen und Abstände. Das img- Element wird entsprechend kleiner. Ohne box-sizing:border-box;, wird das div-Element größer. Grüße |
Ich verstehe dein Problem ehrlich gesagt auch nicht.
Bilder sollten, auch wenn einem die Ladezeit nicht so wichtig ist, immer in der Größe ausgeliefert werden, in der sie angezeigt werden. Willst du also, dass dein Bild 580x340px an Platz beansprucht auf der Website, dann liefere es auch in dieser Größe aus. Abstände, etc. kannst du dann natürlich immer noch definieren. Ist dir die Ladezeit aber egal, dann liefere die Bilder ruhig größer aus als du sie benötigst, aber dann lass eben die Größenangaben weg. Für eine Möglichkeit musst du dich entscheiden. |
O.k., aufgrund meiner mangelhaften Beschreibung konntet ihr nicht wissen, was ich genau möchte.
Irgendwie weiß ich jetzt auch nicht so recht, wie ich das am besten beschreiben soll, aber ich glaube, dass das so überhaupt nicht funktioniert, wie ich das möchte. Habe jetzt aber andere Sorgen und daher ist mir das jetzt ziemlich egal. Danke an alle, die sich mit meinem Problem auseinandergesetzt haben! Wünsche euch einen schönen Tag |
Wenn du immer 100% Breite haben willst, dann darfst du nicht die Bildmasse im IMG-Element angeben. Wer sagt das es langsamer ist. Heutzutage jedenfalls nicht mehr.
|
Zitat:
Ich weiß auch nicht mehr, wo ich gelesen habe, dass man die Größe der Bilder im Quelltext hinterlegen sollte, weil damit eine Seite schneller aufgebaut wird. Habe ich aber schon mehrfach gelesen. |
Du kannst die Größe im img-Element als Attribut angeben. Dann kann der Browser den Platz für das Bild freihalten, ehe das Bild selbst heruntergeladen ist. Das vermeidet "Hüpfen" beim Seitenaufbau.
Das ist aber nur möglich, wenn die Bilder auch in der Größe angezeigt werden, die in den Attributen steht. Wenn im CSS max-width:100%;height:auto; für die Bilder steht, sind die HTML-Attribute wirkungslos. Anders ausgedrückt: Du kannst nicht beides haben. Entweder du hast den Vorteil der vor dem Rendern bekannten festen Größe oder du hast flexible Bilder. |
Zitat:
vielen Dank für die verständliche Erklärung! Ich habs nun voll und ganz verstanden. Ich wünsche euch noch einen schönen Tag |
Alle Zeitangaben in WEZ +2. Es ist jetzt 15:01 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023