einsiedler: Geheimnisse der IMG - Skalierung

Hallo liebes Forum,

Um mein Problem bildlicher zu machen, hab ich mal ein Bildschirmscreen vorbereitet. Ich versuche immer noch zu ergründen wie die Bildskalierung funktioniert.

Bildschirmscreen / Bildskalierung

Doch komme ich nicht dahinter. Bitte könnt ihr mir das mal erläutern:

Wie ich media-queries einsetze um mein Problem zu händeln!

Bisher sieht mein CSS so aus:

  div {
		display: flex;
    flex-wrap: wrap;
		justify-content: space-between;
	}
	.blog figure {
		flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 60.8%;
    -ms-flex-preferred-size: 60.8%;
	}
	figure {
		min-width: 0;
    max-width: 100%;
		margin: 0 auto;
	}
	.blog figcaption {
		font-size: 0.97rem;
		text-align: center;
		padding-top: 0.5rem;
	}
	img {
		display: block;
    max-width: 100%;
    max-height: 100vh;
		margin: 0 auto;
	}
	video {
		display: block;
		max-width: 100%; 
		height: calc(150% * 9 / 16);
		}

Doch das ist noch NICHT so wie ich es mir wünsche!

Da müssen villeicht noch ein oder mehrere:

@media all and (max-width: XXX px) { XXX { } }

hin!

Viele Variationen hab ich schon ausprobiert!

Als allerletzten Versuch würde ich das IMG in ein mit Prozent- oder vw / vh Angaben versehenes <figure> "einklemmen"!

Wie ich DANN aber das prozentuale Bild auf voller Breite bekomme WENN das Bildschirmfenster maximal zusammengeschoben ist, ist ein Folgeproblem!

Aber das müsste doch noch anders gehen oder? Nur wie?

Fragende Grüsse

der geduldige einsiedelnde

akzeptierte Antworten

  1. Hallo einsiedler,

    was möchtest du erreichen?

    Bis demnächst
    Matthias

    --
    Rosen sind rot.
    1. Hallo, das ist in meinem Bild erläutert weil ich es schriftlich irgendwie nicht beschreiben kann, dabei handelt es sich bei "welten-bau.de/test/img... BLUPP" um meine Webseite.

      Grüße der geduldige einsiedelnde

      1. Hallo

        HTML und CSS sind im Zusammenspiel auf Benutzerfreundlichkeit ausgelegt.

        Deine Vorstellungen sind jedoch benutzerunfreundlich. Deshalb kommst du nicht weiter und kannst auch keine Lösung finden. Die gibt es schlicht nicht. Du kannst zwar herumtricksen und gegen das HTML und CSS arbeiten, dass wird aber immer zu Problemen an anderen Stellen führen.

        Ich kann auch keinen praktischen Sinn in deinen Wünschen entdecken.

        Wenn Besucher Webseiten skalieren erwarten sie, dass sich die gesamte Webseite anpasst und nicht nur Teile davon. Daran solltest du auch nichts ändern.

        Gruss

        MrMurphy

        1. Guten morgen,

          ja gut und schön, wenn aber die Bilder beim ‚extremen skalieren‘ der Schrift

          dermaßen pixelig und unschön werden, find ich, hat es schon einen Wert!

          Oder denkst Du das ich die Bilder in HQ ins Web stelle?

          Max. 150 kb geb ich jedem Bild, ist doch auch besser zum ‚schnellen laden‘, richtig!

          Grüße der einsiedelnde

          1. Hallo,

            … wenn aber die Bilder beim ‚extremen skalieren‘ der Schrift

            dermaßen pixelig und unschön werden, find ich, hat es schon einen Wert!

            wenn jemand die Seiten so stark vergrößert, hat das bestimmt seinen Grund. Und diese Person wird dann kaum sehen, dass deine Bilder pixelig sind.

            Oder anders: wenn ein HD-Bild auf eine 100m-Leinwand projiziert wird, ist das aus 1m Entfernung bestimmt auch pixelig, aber wer steht schon so dicht an der Leinwand?

            Gruß
            Jürgen

            1. @@JürgenB

              Oder anders: wenn ein HD-Bild auf eine 100m-Leinwand projiziert wird, ist das aus 1m Entfernung bestimmt auch pixelig, aber wer steht schon so dicht an der Leinwand?

              Aber wer hat schon eine 100m-Leinwand?

              LLAP 🖖

              --
              “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
              1. Hallo,

                100m-Leinwände stehen natürlich nicht an jeder Ecke rum. Aber bei Tassilo kann ich mir schon vorstellen, das Fotos seiner Arbeiten auch auf größere Flächen projiziert werden.

                Gruß
                Jürgen

              2. Zwar keine 100 m Leinwand aber immerhin gute 4 m ... *grins×

                Link zu einem IMG auf welten-bau.de

                So lässt sich Kino.... ;o)))

                Grüsse der einsiedelnde

        2. 06:26 Anm: Und zum zweiten nehmen ‚schmalere (vertikale) Bilder‘ im width

          beim zusammenschieben des Fensters immer auch dieselbe Breite wie die breiten

          horizontalen Bilder ein. Das find ich nicht so gut!

        3. Okay, ich höre generell daraus das es so NICHT üblich ist wenn man eine Webseite gestaltet.

          Nur halt das eine, wenn man bei 100% Schriftgröße das Bildschirmfenster extrem zusammenstaucht

          soll halt das IMG 100% oder 95% des Fensters einnehmen,

          dann ist es für kleines z.B. Mobiles auch hübsch groß sichtbar.

          Das kann ich selber gut mit media-queries hinbekommen, das hab ich schon mal geschafft.

          Ansonsten müsste man das IMG doch in ein mit vw und vh Angaben abgegebenes "Fenster"

          "einzwängen" und dann für einem bestimmten media-querie-Bereich "aktivieren".

          Mir gefällt auch nicht, das in der Breite schmalere Bilder dann beim zusammenstauchen

          dieselbe Breite einnehmen wie die horizontal Breiten Bilder.

          Die könnten doch eigentlich proportional hübsch angepasst zu den anderen, angezeigt werden.

          Naja, villeicht macht man es nicht so, im Design. *seufZ×

          Grüße der einsiedelnde

          1. Hello,

            wie wäre es denn, wenn Du für die Skalierung ein eigenes Bedienelement vorsiehst? Dann könntest du die Seite bzw. die betroffenen Elemente beim Server neu anfordern durch gezielte Bedienungshandlung.

            Liebe Grüße
            Tom S.

            --
            Es gibt nichts Gutes, außer man tut es!
            Das Leben selbst ist der Sinn.
            1. Klingt sehr gut…

              Wäre das dann eine php-Lösung?

              Grüsse der einsiedelnde

              1. Hello,

                Klingt sehr gut…

                Wäre das dann eine php-Lösung?

                PHP (oder) 'was ähnliches, CSS und zur Ergänzung JavaScript.

                Liebe Grüße
                Tom S.

                --
                Es gibt nichts Gutes, außer man tut es!
                Das Leben selbst ist der Sinn.
          2. Hallo einsiedler,

            Warum machst du immer eine Leerzeile zwischen deine Ausführungen? Bzw. Warum steckst du einzelne Zeilen in einen eigenen Absatz?

            Mir gefällt auch nicht, das in der Breite schmalere Bilder dann beim zusammenstauchen

            dieselbe Breite einnehmen wie die horizontal Breiten Bilder.

            Gib den Bildern verschiedene Klassen, etwa portrait bzw. landscape.

            Bis demnächst
            Matthias

            --
            Rosen sind rot.
            1. Hmmm, ja stimmt...

              Grüsse der einsiedelnde