Ich frage mich ob es für Flexbox da eine Alternative gibt die genau so oder sehr ähnlich wirkt wie Bootstrap
Ich habe
background-size: cover (bzw contain);probiert habe es aber für meine idee nicht hinbekommen.
Bootstrap
<img src="bilde.jpg" class="img-fluid">Du lieferst eindeutig zu wenig Informationen. Wir sitzen nicht vor deinem Bildschirm und können nicht sehen, was genau du vorhast. Ein Link zur Seite oder zur Not mehr HTML/CSS Code wären hilfreich.
Die Frage, was @mick62 vor hat, lässt sich durch eine kurze Google-Suche beantworten:
https://getbootstrap.com/docs/4.0/content/images/
Die Seite ist
https://walachei-spachbrücken.de
Und dank @Sempervivum musste ich mir tatsächlich sehr viel der Seite selbst ergooglen bzw anlesen.
In sofern hat es mir einiges gebracht. Doch wozu brauch ich ein Forum wenn keiner helfen will, weil man sich selbst für den html-Gott hält und meint jeder im Forum sollte selbst ein solcher sein.
Aber wie dem auch sei ich habe zwischen zeitlich wie immer selbst gegoogled aber hab nichts zu einem echten fluid für Flexbox gefunden.
Wer sagt, dass dir keiner helfen will? Wenn du aber mit Informationen geizt, kannst du auch kaum Hilfe erwarten.
Das ist ja völliger Quatsch.
Ich muss mich für die Entgleisung entschuldigen. Es gehörte eigentlich auch gar nicht in dieses Forum.
Und auch bei @Sempervivum tue ich das. Der Frust kam tatsächlich aus einem anderen Forum, wo es einige Missverständnisse gab.
Es wird nicht wieder vorkommen!
Und auch mein Eingangspost ist nicht eindeutig.
Tatsächlich suche ich ein Flexbox fluid das wie bei Bootstrap nur ohne Bootstrap
Geht es um ein oder mehrere Bilder im HTML-Quelltext oder Hintergrundbilder?
Weil „img“ sind Bilder im HTML-Quelltext, „background-size“ bezieht sich auf Hintergrundbilder.
Mit Flexbox „display: flex;“ hat das eher nichts zu tun.
Sollen die Bilder nur so breit werden wie der sie umgebende Container?
Es geht oben um das #header-top . (Das Bild gleich unter der Navigation)
Im Augenblick habe ich das mit vielen Mediaqueries einigermaßen gelöst.
Da wäre mir wenn es gibt eine Alternative lieb.
Der richtige link ist:
https://walachei-spachbrücken.de
Flex wirkt sich nur auf die Kindelemente aus!
Du hast nur #header-top.
Wenn du willst, dass das Bild sich anpasst mit dem richtigen Seitenverhältnis kannst du aspect-ratio verwenden:
#header-top {
aspect-ratio: 1920/612;
height:auto;
background-position: center;
}
Weiß aber nicht, ob das dein Ziel ist.
Hast du da mal ein link wo ich das mal sehen kann? denn dich denke, dass ich für hochkant Ansichten ein anders angepasstes Bild brauche. falls es kein Link gibt probier ich das morgen einfach mal aus
Habe gerade das gefunden. ist aber eher keine Alternative
Hi, hier mal bei Codepen:
https://codepen.io/Oliver7777/pen/vYwyXxd
Wenn du den Browser kleinziehst siehst du was passiert, hab mit Media Queries noch ne Ansicht für mobil eingebaut.
aspect-ratio: 1920/612; Das sieht super aus. Ich werde mal morgen probier wie das in meinem Fall funktioniert.
1920/612 steht wohl für die Auflösung. doch wie wird das ermittelt?
Aspect-ratio ist das auflösungsunabhängige Seitenverhältnis, du kannst auch 4/3 oder 3/5 usw. angeben,
der Wert ist jetzt auf die Größe des Bildes gemünzt.
Das ist ja echt super. Zum Verständnis: Die Größe des Bildes ist eher sekundär, da es sich dem Vorgebenen Seiten Verhältnis anpasst. Habe ich das jetzt richtig verstanden?
Jupp, genau!
Jetzt habe ich mal mit meinem Project etwas rum gespielt. Das geht ganz gut nur wirkt es sich auch auf den 2. Teil meines Header aus. Wie kann ich das Bild Theke und den untern Hintergrund (Schaumkrone) sycncronisieren. D.h Der untere Teil soll immer zu nächst Link-Anker gehen.
hab das mal hier online gestellt.
https://my.emess62.de/test.html
Je mehr ich dran rumfummel umso weniger verstehe ich was ich tue.
Der untere Teil soll immer zu nächst Link-Anker gehen.
Was meinst du genau?
Wenn wich die Seite jetzt so einfach per Maus verkleinere kommt die section Gude unten durch oder vom Mobil auf Desktop aufziehe. Ich will mal sehen wie ich das Aufzeichnen kann.
Hier mal ein Clip der das Problem Zeigt.