nicht angemeldet einsiedler
marctrix
Rolf B
einsiedler
Matthias Apsel
MudGuard
Rolf B
Robert B.
Hallo liebe Forumer,
meine Frage: Wie kann ich, in meinem speziellen Fall meinem <div>
mit lex-grow: 0; flex-shrink: 0; flex-basis: xxx%; anweisen das wachsen zu unterbinden?
Ist es möglich das <figure> auf diesem Weg die ursprüngliche Größe beibehält?
[Anm: Villeicht ist dieses <div> gar nicht nötig und kann es eigentlich schon jetzt weglassen.
Stattdessen verwende ich: section > div {margin: 0 auto;} um <figure> mittig zu setzen!]
Ich BITTE um eine genaue Anleitung, mir will es irgendwie NICHT gelingen!
Was ist da zu tun?
Grüsse der einsiedelnde
Rolf B
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
marctrix
marctrix
Rolf B
Hej einsiedler,
meine Frage: Wie kann ich, in meinem speziellen Fall meinem <div>
mit lex-grow: 0; flex-shrink: 0; flex-basis: xxx%; anweisen das wachsen zu unterbinden?
Bei mir wächst da gar nichts?!?
Oder ich verstehe nicht, was du meinst. Da ist ein Bild, dass beim zusammenschieben kleiner wird. Es befindet sich einem div, das ebenfalls kleiner wird, wenn der Viewport schrumpft. Ist nicht genau das so gewollt?
Marc
Hallo einsiedler,
wenn ich das richtig deute, hat das Bild eine natürliche Größe von 650x455 Pixeln. Ohne aktives Eingreifen deinerseits wird der Browser es in genau dieser Größe darstellen.
Das tust Du aber: Im div um die figure ist eine max-width von 61.5% gesetzt. Ist der Viewport nun schmaler als 650 / 0.615 = 1057 Pixel, greift diese max-width Regel und macht das Bild schmaler. Der Browser behält das Verhältnis breite/höhe bei, dadurch wird es auch niedriger.
So. Nun sagst Du, das Bild soll nicht wachsen. Irgendwas am Bild soll also konstant sein. Breite oder Höhe. Was denn? Und auf welcher Berechnungsbasis?
Rolf
Ne ne Rolf B, und das gilt auch für marctrix:
Ich glaube da mißverstehen wir uns ein wenig,
oder ich habe mich da undeutlich ausgedrückt,
so wie ihr es beschrieben habt, wenn man das
Bildschirmfenster zusammenschiebt, damit ist
alles in Ordnung.
Danke Dir Rolf für den Rechenweg, das war mir
so nicht klar.
Nein, das was ich meine ist wenn man mit strg++
die Schrift vergrössert, gibt es da einen Weg
das <div> (oder wenn ich das <div> doch weglassen
sollte das darin befindliche <figure>) an einem
Wachstum zu hindern? Ich habe an verschiedenen
Stellen im CSS mithilfe von lex-grow: 0; flex-shrink: 0;
versucht dem <figure> dieses beizubringen.
Aber anscheinend geht das nicht oder?
Wenn ja wie?
LG der einsiedelnde
Hallo einsiedler,
Stell dir vor, du hast überhaupt keine Ahnung von HTML und Co. Was möchtest du erreichen?
PS: Überlass dem Browser die Entscheidung, wann eine Zeile zuende ist.
Bis demnächst
Matthias
Hi,
PS: Überlass dem Browser die Entscheidung, wann eine Zeile zuende ist.
ach - das soll gar kein Gedicht sein? 😉
cu,
Andreas a/k/a MudGuard
Hallo einsiedler,
du möchtest verhindern, dass die figure am Page-Zoom des Browsers teilnimmt? Das ist ein Problem, weil das Zoom-Feature meines Wissens mit einer Manipulation der CSS-Pixelgröße arbeitet, und damit alle Seitenkomponenten gleichermaßen betrifft.
Die einzigen Einheiten, die von der Pixelgröße unabhängig ist, dürften vw und vh sein, aber wenn Du Deinem Bild eine fixe Breite von z.B. 30vw gibst, dann bleibt es beim Zoomen zwar gleich groß (eben probiert), dafür variiert es dann aber mit der Fenstergröße.
Die Variante, die man eigentlich NICHT empfehlen kann, ist ein selbst gesteuertes Ändern des Text-Zooms, das den Browser-Zoom umgeht. Einige alte Webseiten machen das so, die haben irgendwo ein Icon mit ein paar A in unterschiedlichen Größen, und wenn man drauf klickt, wird die Basis-Fontsize der Seite geändert. Dann braucht man keinen Browser-Zoom mehr. Allerdings hat man dann Browser-Funktionalität in der eigenen Seite eingebaut, und das tut man nicht.
Sorry, keine bessere Idee.
Rolf
Guten morgen, O.K. dann ist das der falsche Ansatz der niemals funktioniert... Dann lasse ich es so wie es ist, probiere noch die vw / vh Version aus aber wenn das Bild prozentual sehr klein wird beim zusammenschieben des Browserfensters dann ist es auch nicht die Lösung! Werde versuchen mit media-queries den Zustand des Bildes auf 100% zu bringen wenn das Browserfenster am schmalsten ist! Wenn das auch nichts wird, dann lasse ich es so... *seufZ× Aber wie kann ich, speziell in meinem Fall, durch max-width das extreme Wachstum des <figure> Elements "einschränken"?
Grüsse der einsiedelnde
@@einsiedler
probiere noch die vw / vh Version aus aber wenn das Bild prozentual sehr klein wird beim zusammenschieben des Browserfensters dann ist es auch nicht die Lösung!
Du kannst die Breite in vw (vh, vmin, vmax) angeben und eine Minimalbreite in rem (em) …
Werde versuchen mit media-queries den Zustand des Bildes auf 100% zu bringen wenn das Browserfenster am schmalsten ist!
… (dazu brauchst du keine media queries) …
Aber wie kann ich, speziell in meinem Fall, durch max-width das extreme Wachstum des <figure> Elements "einschränken"?
… und eine Maximalbreite in rem (em).
LLAP 🖖
Nun gut, ich bin mir nicht sicher ob dies nun die endgültige Lösung ist…
es gefällt mir schon so...
Komischerweise funktioniert es aber: Es sei denn es gibt einen
anderen Lösungsweg den ich übersehen habe (bzw. kein vmin benutzt!)!
Ich habe bisher folgendes:
Tabellenkalksection > div {display: flex; flex-wrap: wrap; margin: 0 auto;}
.blog figure {
display: block;
max-width: auto;
margin: 0 auto;
}
.blog figcaption {
font-size: 0.97rem;
text-align: center;
padding-top: 0.5rem;
}
img {
display: block;
width: 69.691vmin;
margin: 0 auto;
}
video {
}
Hier angewendet: ANWENDUNGSBEISPIEL
Die Frage ist, warum es funktioniert!
ABER: Meine Frage: Kann man so und überhaupt vmin anwenden…
So ohne weiteres oder sollte ich noch an eine Fallbacklösung denken?
Also wegen vmin…
Und wenn ja, wie sieht dann soetwas aus?
FRAGE 2:
Dort habe ich gelesen das man media-queries in em angeben soll!
Ist dies richtig???
Morgentlicher Gruß (und ganz müde)
der einsiedelnde
@@einsiedler
Die Frage ist, warum es funktioniert!
Bei den Werten hege ich Zweifel, dass es das tut. Das sieht mir nach magic numbers aus:
font-size: 0.97rem;
Warum nicht 1rem?
width: 69.691vmin;
Warum nicht 70vmin?
Du brauchst keine Nachkommastellen. Ändere die Werte auf ganze Zahlen. Wenn es dann immer noch funktioniert, gut. Wenn nicht, ist es ein sicheres Zeichen, dass es vorher schon nicht funktioniert hat – bei dir vielleicht schon, aber nicht bei anderen.
So ohne weiteres oder sollte ich noch an eine Fallbacklösung denken?
Also wegen vmin…
Für Browser, die vmin nicht unterstützen, kannst du einen Fallback angeben, falls das nötig sein sollte.
Und wenn ja, wie sieht dann soetwas aus?
Erst den Fallback angeben, dann mit dem vmin-Wert überschreiben:
width: 42em;
width: 70vmin;
Dort habe ich gelesen das man media-queries in em angeben soll!
Ist dies richtig???
Ja.
LLAP 🖖
Komischer weise funktioniert es immer noch! (Habe das Cache auch gelöscht!)
Ich habe dort nun 70vmin stehen!
Nunja: Nun ist das IMG (bei mir) 679 * 475 px gross (Natura: 650 * 455 px)
Aber ja, es ist wohl Unsinn so etwas pixelgenau machen zu wollen…
Die 69.691vw/vmin sind zumindest bei mir ungefähr ca. 650 px.
Ja, warscheinlich natürlich bei euch allen NICHT!
Würde aber bitte nun jemand mal nachprüfen ob die Lösung bei ihm auch funktioniert?
Bei meinem Opera 48.0 / Firefox 57.0 und IE 11 läuft es nun!
Bitte überprüft das mal!
DANKE!
Grüße der einsiedelnde
Hej einsiedler,
Würde aber bitte nun jemand mal nachprüfen ob die Lösung bei ihm auch funktioniert?
Wäre gut den Link dazu zu schreiben, damit nicht jeder, der helfen muss, den in den ganzen Beiträgen suchen muss... 😉
Marc
Hej marctrix,
Geht wohl um diese Seite?
Bei mir funktioniert es!
Warum sollte es auch nicht? Die Unterstützung für Viewport-Einheiten ist Herstellerübergreifend ausgezeichnet.
Marc
@@einsiedler
Nunja: Nun ist das IMG (bei mir) 679 * 475 px gross (Natura: 650 * 455 px)
Aber ja, es ist wohl Unsinn so etwas pixelgenau machen zu wollen…
Kommt drauf an. Du willst, dass das Bild in Originalgröße dargestellt und nicht skaliert wird? Dann ist die Angabe in Pixel richtig – aber im HTML! (Begründung)
Im Stylesheet macht sich dann max-width: 100% sicher nicht schlecht, damit das Bild bei schmaleren Viewports kleiner dargestellt wird.
LLAP 🖖
Hier habe ich nochmal meine Absichten skizziert (wenn daraus jemand schlau wird!)
Eine Skizze! Das ist Beabsichtigt!
section > div {display: flex; flex-wrap: wrap; margin: 0 auto;}
.blog figure {
display: block;
width: 71vmin;
margin: 0 auto;
}
.blog figcaption {
font-size: 0.97rem;
text-align: center;
padding-top: 0.5rem;
}
img {
display: block;
width: 70vmin;
margin: 0 auto;
}
Das ist mein CSS dazu! In der Anwendung: In der Anwendung!
Es funktioniert, es fragt sich bei wem noch!
Mit der Bitte mir da mal zu helfen!
Ich bin damit irgendwie nicht zufrieden!
Wenn ich wüßte wie man das min-width / max-width von <figure>
mit dem vw / vh /vmin / vmax des <img>
richtig VERSCHACHTELT!
Irgendwie muss es verschachtelt werden das das eine mit dem anderen greift!
Jetzt ersteinmal gute n8
der einsiedelnde
@@einsiedler
Hier habe ich nochmal meine Absichten skizziert
Darf ich deine Absicht mal grundsätzlich infrage stellen?
Du willst, dass sich das Bild nicht vergrößert, wenn ein Nutzer [cmd][+], [ctrl][+] (oder was auch immer die Tastenkombination zum Reinzoomen ist) drückt?
Das ist vielleicht nicht gerade das, was der Nutzer will. Sie will womöglich alles vergrößern, um das Bild besser erkennen zu können.
Also warum soll sich das Bild nicht zumindest bis zur Viewportbreite ausdehnen dürfen?
LLAP 🖖
Na klar, darfste.... ;o)
Ich werde zukünftig nicht nur (späßchen Dokumentationen) zeigen
sondern auch (Foto-) Arbeiten selbst, die es (z.B.) in gedruckter Form
(auf Papier, Dibond... etc.) bei mir zu kaufen gibt.
Zur Zeit überlege ich mir noch in welcher Form ich so etwas präsentiere.
Heißt: Ich denke nach über UNSICHTBARE digitale Wasserzeichen,
in welcher Größe biete ich den Besuchern die Fotos an (so wenig kb
wie nötig bei einer noch passablen Abbildung! etc.)
So z.B. mein Gedankenweg: Wenn ich Bilder mit sagen wir 150 kb reinstelle
werden die bestimmt nicht bei voller Bildschirmbreite gerade gut aussehen!
Villeicht ja doch, zur Zeit hab ich nur mini-Dateien von max. 100 kb eingestellt.
Tja.... soweit meine Gedanken…
Als Referenz sehe ich z.B. folgende Website: Contemporary Art Daily
Wenn man dort mal schaut dann sind die Fotos in der Regel schon größer als 200 kb,
manche sogar 500 kb (weiß nicht wie sich das dann mit der Ladezeit verhält...!!!)
Nebenbei bemerkt: Die Präsentation der Fotos finde ich ganz ansprechend. :o)
Grüße der einsiedelnde
Hallo einsiedler,
Warum musst du deine Beiträge durch sinnlose Zeilenumbrüche verhackstücken?
Bis demnächst
Matthias
Öhm, wie macht man es sonst, sonst kommt bei mir immer nur ein langer Fließtext dabei heraus. Wie jetzt auch. Finde ich umständlich zu lesen, irgendwie… nagut,werde mich bemühen...
Hallo einsiedler,
wenn Du unbedingt Zei-
len-
um-
brüche erzwingen willst,
so wie hier,
ohne eine Leerzeile zu generieren,
dann mach einfach 2
in Worten: ZWEI
Leerzeichen ans Ende der Zeile,
statt zwei mal ENTER zu drücken.
Das klappt ganz gut, nur in Verbindung mit ~~~ Blöcken oder Listen gibt's gelegentlich Probleme. Fließtext ist auch gar nicht so von Übel, man findet dieses Phänomen häufig in der Weltliteratur und es wird dort recht gern gesehen.
Man kann dann die Lesbarkeit durch GELEGENTLICHE Absätze, also 2x ENTER, etwas steigern. So wie hier.
Alles klar?
Ich habe deine Motivation bei deiner Frage zunächst nicht in Frage gestellt. Aber den Zoom zu begrenzen/verhindern, weil die Preview-Bilder sonst schlecht aussehen, halte ich für eine unzureichende Begründung. Vielleicht will ich unbedingt die Bilder zoomen, weil mein Viewport eine merkwürdige Auflösung mitbringt und die Bilder daumennagelgroß angezeigt werden? Es ist nie gut, die Browserfunktionalität zu limitieren. Überlass die Entscheidung besser dem User.
Vor allem wird das Thema "Responsiveness" dadurch nur unnötig verkompliziert.
Rolf
Hallo,
man findet dieses Phänomen häufig in der Weltliteratur und es wird dort recht gern gesehen.
wie du seiner Webseite entnehmen kannst, handelt es sich beim Einsiedelnden um einen Künstler und du kommst mit Weltliteratur…
tststs
Gruß
Kalk
@@einsiedler
Hier angewendet: ANWENDUNGSBEISPIEL
BTW, die Zeilenhöhe im Kopf und bei Überschriften ist zu groß:
LLAP 🖖
O.K., guten Abend Leute,
wie folgt, funktioniert es nun (Bei meinem Opera 49.0 / Firefox 57.0 und IE 11)
section > div {display: flex; flex-grow: 0; flex-shrink: 0; width: 34rem; max-width: 85vmin; margin: 0 auto; border: 1px dotted brown;}
.blog figure {
flex-grow: 0; flex-shrink: 0;
max-width:100%;
height:auto;
position: relative;
display:block;
margin:0 auto;
border: 1px dotted green;
}
.blog figcaption {
font-size: 0.97rem;
text-align: center;
padding-top: 0.5rem;
}
img {
width:100% !important;
height:auto !important;
display:block;
border: 1px dotted orange;
}
Bestimmt kann da noch etwas "weggestrichen" werden was unütz ist, aber das find ich morgen heraus.
In der ANWENDUNG Seite in der ANWENDUNG
Mit der BITTE das ihr es selbst auch mal austestet ob es funktioniert!
Und ihr mir villeicht auch sagt was davon noch unütz ist!
Lieben Gruß und gute n8
der einsiedelnde
Hallo @einsiedler,
weil es sowohl in deinem Ausgangsposting als auch jetzt hier auftaucht:
Ich habe an verschiedenen Stellen im CSS mithilfe von
lex-grow: 0; flex-shrink: 0;versucht dem <figure> dieses beizubringen.
Hast du dort wirklich lex-grow notiert oder flex-grow? Der Browser kennt nur letzteres.
Viele Grüße
Robert
Nee nee, schon flex-grow , das war jetzt nen copy-paste Fehler meinerseits... ;o)
Hallo einsiedler,
oder war's ein freudscher Vertipper angesichts deines Frusts? (Do lex mi doch am ...)
Rolf
@@Robert B.
Hast du dort wirklich lex-grow notiert oder flex-grow? Der Browser kennt nur letzteres.
Ich prangere das an! Es sollte eine Lex Browser her, dass Browser sich da mal nicht so anstellen, jawoll!
LLAP 🖖
Hallo @Gunnar Bittersmann,
beinhaltet diese „Lex Browser“ dann auch gleich eine Addon-Schnittstelle zum Generieren eines Impressums sowie für Abmahnungen? 😂
Viele Grüße
Robert