Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
bootstrap Grid Problem
#1
War mit mit meinem Bootstrap Code bis vor kurzem zufrieden um Bilder mit jeweils einem Link titel darunter responsive darzustellen
Code:
<div class="row align-items-end text-center mx-4">
       <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 p-3"><img src="Bilder/001.jpg" class="img-fluid"> Bild 1</div>
       ...
</div>

Nun möchte ich aber die Bilder unterschiedlich groß darstellen und sie sollen dabei trotzdem responsive bleiben also das bedeutet: die bilder sollen größer oder kleiner werden wenn sich die Browserfenstergröße verändert und außerdem soll die Spalteanzahl sich dementsprechend anpassen. Und trotzdem soll Bild 1 möglicherweise größer oder kleiner als Bild 2 sein.
Der Code wird in Typo3 erzeugt und aus typo3 Perspektive ist das Problem des einstellens der Bildgröße gelöst.

Also meine Frage ist nun an alle die sich mit bootstrap auskennen: sagen wir wir haben einen Variable X für die Größe des Bildes wie verwirkliche ich das in Bootstrap?
Ich kann für die Varialbe schlecht eine px Größe verwenden. Dann hätte das Bild eine fixe px Größe und wäre nicht mehr Responsive.

Für dieses Problem muss es doch eine einfache Lösung geben ohne col-12, col-sm-6,... jeweils durch Variablen zu ersetzen. Es muss einfach gelöst werden können durch eine einzige Varialbe die auch für Nicht-Webdesigner versändlich ist. Ich habe keine Ahnung wie ich das Problem angehen soll.
Zitieren
#2
Du könntest die Bildgröße in % angeben. Dann passt es sich prozentual an der Größe des Grids an. Mit Typo3 kenne ich mich aber leider nicht gut aus also weiß ich nicht, wo man das ändern könnte!
Zitieren
#3
Falls ich deinen Lösungsvorschlag richtig verstehe dann hilft mir das nicht weiter.
Ich möchte, dass die größe des Grids der Größe des Bildes entspricht. Also eigentlich soll das Bild immer 100% width des Grids ausfüllen und das Grid soll eine Größe haben die durch den Website Eigentümer festgelegt wird.
Also anstatt dem Standard
Code:
<div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 p-3"><img src="Bilder/001.jpg" class="img-fluid">

könnte es zum Beispiel sein, dass der Websiteowner das Bild größer haben will. Zum Beispiel wäre die Größe immer 12 und erst ab lg 6

Es würde mir zum Beispiel gefallen wenn ich die den Grid prozentual für sm, md, lg, xl , ... setzen könnte. Also sinngemäß so quasi col-xl-50%. Das wäre für den Websiteowner - der/die über keine Webdesignkenntnisse verfügt - verständlich wenn er/sie festlegen kann: ich möchte bei meiner Bildschirmstandardgröße (das wäre dann xl oder lg) 33% und typo3 rechnet dann die Prozentualwerte für die anderen Bildgrößen aus...
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste