XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit box-sizing: border-box bei Bildern (http://xhtmlforum.de/showthread.php?t=71096)

web334 30.06.2014 14:11

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?

gabischatz 30.06.2014 15:59

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

cloned 01.07.2014 08:47

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.

web334 01.07.2014 16:24

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

explanator 01.07.2014 18:09

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.

web334 02.07.2014 17:42

Zitat:

Zitat von explanator (Beitrag 540112)
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.

Wo sollte ich die Bildmaße denn dann angeben?

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.

fricca 02.07.2014 18:35

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.

web334 03.07.2014 14:15

Zitat:

Zitat von fricca (Beitrag 540145)
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.


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