• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

gibt es bei flexbox sowas wie class= img-fluid bei bootstrap

M

mick62

Neues Mitglied
Ich frage mich ob es für Flexbox da eine Alternative gibt die genau so oder sehr ähnlich wirkt wie Bootstrap
Ich habe
CSS: 
background-size: cover (bzw contain);
probiert habe es aber für meine idee nicht hinbekommen.

Bootstrap
CSS: 
<img src="bilde.jpg" class="img-fluid">
 
Zuletzt bearbeitet:
Werbung:
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:
getbootstrap.com

Images

Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
getbootstrap.com getbootstrap.com
:wink:
 
Werbung:
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.
 
Zuletzt bearbeitet:
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
 
Werbung:
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
 
Zuletzt bearbeitet:
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:
CSS: 
#header-top {
aspect-ratio: 1920/612;  
height:auto; 
background-position: center; 
}
Weiß aber nicht, ob das dein Ziel ist.
 
Werbung:
Oliver77 schrieb:
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:
CSS: 
#header-top {
aspect-ratio: 1920/612;
height:auto;
background-position: center;
}
Weiß aber nicht, ob das dein Ziel ist.
Zum Vergrößern anklicken....
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
 
Zuletzt bearbeitet:
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?
 
Werbung:
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.
 
Oliver77 schrieb:
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.
Zum Vergrößern anklicken....
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?
 
Werbung:
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.
 
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.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben