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>