Oli: Probleme mit srcset, sizes & calc() in CSS-Grid ab bestimmten Breakpoint

Beitrag lesen

SELF-Forum

Probleme mit srcset, sizes & calc() in CSS-Grid ab bestimmten Breakpoint

Oli
– Informationen zu den Bewertungsregeln

Warum nehmen die Spalten nicht mehr den ganzen Platz ein ab dem Breakpoint 992px?

Die folgende Beispiel-HTML-Datei zeigt die Problematik und wie sie mit calc() unschön gerade gebogen werden kann. Die HTML-Datei läd die Bootstrap CSS-Datei von einem CDN-Server.

Werde mich mal umgucken wo ich meine Quellcodes zukünftig online zugänglich machen kann.

<!doctype html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</title>
</head>

<body>
    <main>
        <div class="container-flex">
            <div class="container">

                <h2>Warum nehmen Spalten nicht mehr den ganzen Platz ein ab Breakpoint 992px?</h2>
                <h4>Erstmaliger Versuch mit srcset, sizes & calc() Bandbreite bei Bildern zu optimieren:</h4>


                Die calc() Berechnungen sind nicht mehr aktuell. Das soll aber nicht das Thema sein. Ich würde gerne wissen warum es das Layout zerhaut ab 992px (ab dem 3-spaltigen Layout) in meinem Firefox (Version 69.x). Auch wundert mich, dass das Layout wieder funktioniert wenn ich im ersten calc() des ersten Bildes statt <code>calc( (1042px</code> eine deutliche größere Pixelzahl, z.B. <code>calc( (5042px</code>, schreibe. Dadurch wird das 1. Bild in der hohen Auflösung heruntergeladen.

                <div class="card">
                    <div class="card-body border border-danger">
                        <div class="card-group">
                            <div class="row">
                                <div class="col-sm-6 col-lg-4 border border-danger">
                                    <div class="card">
                                        <img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
      	https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
	   (min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
	   (min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
       (min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
       calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 1" />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-4 border border-danger">
                                    <div class="card">
                                        <img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
      	https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
	   (min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
	   (min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
       (min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
       calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 2" />
                                    </div>
                                </div>
                                <div class="col-sm-6 col-lg-4 border border-danger">
                                    <div class="card">
                                        <img class="card-img-top" srcset="https://via.placeholder.com/640 640w,
      	https://via.placeholder.com/300 300w" sizes="(min-width: 1200px) calc( (1042px - (2 * 48px) - (4 * 15px)) / 3 ),
	   (min-width: 992px) calc( (862px - (2*48px) - (4*15px)) / 3 ),
	   (min-width: 768px) calc( (622px - (2*48px) - (2*15px)) / 2 ) ,
       (min-width: 576px) calc( (498px - (2*20px) - (2*15px)) / 2 ),
       calc(100vw - (2*20px))" src="https://via.placeholder.com/300" alt="Bild 3" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln