zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Bildhöhe variabel zu Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.11.2020, 18:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2020
Beiträge: 2
kanuddel befindet sich auf einem aufstrebenden Ast
Standard Bildhöhe variabel zu Breite

Hallo zusammen,

ich hbe eauf meiner Seite einige Bilder, die mit eine max-width von 100% dafür sorgen, dass es auch mobil gut aussieht.

Nun ist es so dass durch die Ladezeiten der Bilder ein Cumulative Layout Shift entsteht den ich verhindern will.

Normalerweise geht das ganzeinfach, indem ich ein <div> um das Element baue und dem Div die entsprechende Höhe des fertig geladneen Inhalts gebe.

Nun ist die Höhe der Bilder aber nicht klar, sondern abhängig von der Breite des Bildschirms, bzw des Divs in dem sie sind.

Da die Bilder alle gleich sind, und somit auch der Aspekt zwischen Höhe und breite immer gleich ist, könnte ich - falls es das gibt - dies lösen indem ich die height abhängig von der aktuellen width festlege. Also z.b. height: 0,75*[aktuelle witdh dieses Elements].

Kann CSS sowas oder muss das zwingend mit JS gemacht werden, worauf ich gerne verzhten würde.

Danke für eure Mühe,

kanuddel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.11.2020, 20:35
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.029
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Das lässt sich zumindest mit CSS tricksen. Das Padding eines Elements kannst du in Prozent angeben, dann bezieht sich dieser Wert auf die Breite des Elements selbst. Für ein Seitenverhältnis von 16:9 wäre das zum Beispiel ein padding-top: 56.25%;, die Höhe muss auf 0 gesetzt werden.

Das Bild selbst kannst du dann entweder als Hintergrundbild setzen oder absolut auf dem umgebenden Element (mit dem Padding) positionieren.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.12.2020, 00:52
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 28.11.2020
Beiträge: 2
kanuddel befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank! Ich habs damit hinbekommen!

Für die Nachwelt, die vor dem gleichen Problem stehen, hier meine Umsetzung die funktioniert:

Vorher:
Code:
<img src="https://www.url.de/bild.jpg">
Nachher:
Code:
<div class="startseite_vorteile_nocls" style="background-image: url(https://www.url.de/bild.jpg);"></div>
und
Code:
.startseite_vorteile_nocls{
	padding-top: 63.88%;
	height:0px;
	background-size:100%;
}
Padding Top ist dabei wie beschrieben die Ratio zwischen Höhe und Breite. Mein Bild ist 695*444px, somit 63.88%
Mit Zitat antworten
  #4 (permalink)  
Alt 01.12.2020, 09:27
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.090
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Nachteil der Lösung ist nur dass es jetzt kein Bild mehr ist sondern nur ein Hintergrund (Schmuckbild). Screenreader sagen an der Stelle dem Nutzer nicht, dass hier ein Bild ist und was darauf zu sehen ist.
Mit Zitat antworten
  #5 (permalink)  
Alt 01.12.2020, 22:19
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.029
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Das ließe sich mit Hilfe von object-fit auch mit einem img-Element umsetzen. Zum Beispiel das Padding auf ein umschließendes Element legen und das img darüber positionieren.
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
Realtive Bildhöhe und -breite einer jQuery Slideshow Riedi2008 CSS 2 26.03.2013 00:51
variabel Breite & center saxandl CSS 3 25.09.2011 14:02
Box variabel in Breite und Höhe Black Fladder CSS 2 12.04.2008 17:31
3 Spalten, Breite der Äußeren variabel, Breite der Inneren fest xavernitsch.de CSS 4 24.09.2007 17:45
Mittlere Spalte mit fixer Breite, Ränder variabel? tranquillo CSS 1 24.03.2005 11:36


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