zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Probleme mit box-sizing: border-box bei Bildern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 30.06.2014, 14:11
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard 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?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 30.06.2014, 15:59
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.11.2010
Ort: Bad Langensalza
Beiträge: 733
gabischatz ist in Verruf geraten
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.07.2014, 08:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 01.07.2014, 16:24
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 01.07.2014, 18:09
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

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.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #6 (permalink)  
Alt 02.07.2014, 17:42
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
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.
Mit Zitat antworten
  #7 (permalink)  
Alt 02.07.2014, 18:35
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 03.07.2014, 14:15
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 02.01.2007
Beiträge: 243
web334 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
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
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Probleme mit Box in Box Pimbolie1979 CSS 7 11.11.2005 00:04
Probleme mit Box id und class Etosch CSS 9 14.07.2005 13:15
border um box eyetag CSS 17 12.05.2005 10:04
#boxes a:hover.info: 2.posting mit css !!! marioN CSS 5 25.01.2004 18:04
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, marioN CSS 2 19.01.2004 18:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 04:13 Uhr.