CSS-Frage: abhängig von @media skalierbares Bild mit float und Textumfluss

Clemens-XS · 15. Juli 2019

Eigentlich… ja eigentlich müsste es ganz einfach sein:

Ich erstelle einen Artikel in Joomla, der links oben mit einem Bild beginnt, also top: 0px; left: 0px; und float: left; hat. Der Text fließt also rechts am Bild entlang und je nach Textlänge auch unterhalb des Bild weiter. Damit der Text Abstand vom Bild hat, erhält das Bild nach rechts und unten einen margin zugewiesen.

Nun möchte ich mir die Mühe sparen, für jedes Bild zwei oder sogar drei Auflösungsvarianten bereit zu stellen und diese abhängig von der Breite des Viewport durch zwei bis drei @media -Abfrage einzubinden. Ich fand nach einiger Suche im Web die Möglichkeit für Bilder "transform: scale(0.5, 0.5); zu nutzen. Das wäre eine äußerst elegante Lösung.

Resultat ist aber, dass der Platz für die ursprüngliche Bildgröße reserviert bleibt und das Bild in diesem reservierten Bereich zentriert und mit dem vorgegebenen Maßstab verkleinert erscheint. Was ich brauche, ist aber, dass das Bild weiterhin links oben in der Ecke beginnt.

Also hab ich das Bild mitsamt seiner Skalierungs-Definition in einen Div-Container gepackt und dessen Position auf top: 0px; und left 0px; gesetzt. Hat aber auch nix gebracht.

Frage: Gibt es eine Lösung mit "transform: scale(…)" oder bleibt es mir nicht erspart, zwei bis drei Bildvarianten bereit zu stellen?

firstlady · 15. Juli 2019

Mit einem Link wäre es leicht zu beantwoorten.

Was stört ich an @media queries? Du könntest für jede Größe eine max-width für das img festlegen, dann würde es sich anpassen, denke ich.

Clemens-XS · 15. Juli 2019

Mich stört nichts an Media-Queries, sondern der Aufwand, alle Bilder in zwei bis drei Auflösungen zu erstellen. Mit max-width hatte ich noch nicht probiert, würde aber weiterhin mehrere Bilder erforderlich machen.

Da ich auch mit LazyLoading arbeite, kann ich es mir leisten, auch höher aufgelöste Bilder, als für den Viewport nötig, auszuliefern, wenn sie sich denn nur passend skalieren würden! Damit meine ich im Idealfall das Verhalten eines Bildes, das allein im Viewport steht und sich bei Verschmälerung der Breite automatisch in Breite und Höhe anpasst. Genau diese Anpassung eines Bildes wünsche ich mir, jedoch sollte sie in dem eingangs beschriebenen Zusammenhang erfolgen: z.B. ab einer Mediabreite unterhalb von 900px soll das Bild bei weiter sich verringernder Mediabreite proportional immer kleiner werden bis hin zu einer CSS-definierbaren min-width des Bildes.

Die Experimentier-Website ist zurzeit auf einer XAMPP-Installation, daher aktuell kein Link verfügbar.

Re:Later · 15. Juli 2019

Zitat von Clemens-XS

würde aber weiterhin mehrere Bilder erforderlich machen.

Nein, da du sie ja per CSS (also @media usw.) einfach nur, je nach Bildschirmbreite, skalierst.

Und, wenn du mit Prozenten arbeitest und mehreren @media-Anweisungen m CSS kriegst auch den Rest wie gewünscht hin.

Irgend so was:

Code

@media (max-width: 1200px) {
  .item-image {
    width: 48%;
    float:left;
  }
}

@media (max-width: 480px) {
  .item-image {
    width: 100%;
    float:none;
  }
}

Alles anzeigen

Clemens-XS · 15. Juli 2019

Vielen Dank! Ich stand wohl „auf der Leitung” und hab es unnötig verkompliziert....

Es funktioniert jetzt wie gewünscht, gilt aber nun leider für alle Bilder auf der Website, was wiederum unerwünscht ist. Es soll ja nur für diejenigen Bilder gelten, die in einer bestimmten Gruppe von Artikeln sind.

Ich habe mal um das Bild einen div-Container herum gemacht. Pech: Das Bild skaliert zwar, aber der Container bleibt immer so breit, wie das nicht skalierte Bild, während sich die Höhe des Containers der neuen Bildhöhe anpasst.

Es ist wohl ein ziemlicher Unterschied, ob ich auf die Vererbung setze und das Bild in einen div Container platziere oder ob ich eine zuvor definierte Klasse mit in das img-Tag einbaue, al la <img class="clemens-img" src:....>

JohannesK · 15. Juli 2019

Dann gibst du den Bildern für die das gelten soll einfach im Editor eine CSS Klasse mit und ersetzt das .item-image im Code oben durch deinen Klassennamen

Clemens-XS · 15. Juli 2019

Genau das habe ich gerade versucht. Ich habe für die Bilder z.B. definiert:

Code

@media (min-width: 700px) {
    .cl-art-img {
        margin-right: 1em;
        margin-bottom: 1em;
        border: solid 1px red;
        float: left;
        width: 100%;
    }
}

und das Ergebnis ist, dass das Bild nun so breit wird, wie der Viewport bzw. ein darüber liegender Container eines Modul usw.

Die Prozentsätze beziehen sich also immer auf die maximal jeweils verfügbare Breite und nicht auf die Bildbreite.

Eingefügt habe ich im HTML: <img class="cl-art-img" src="images/....jpg">

Was mache ich falsch?

Re:Later · 15. Juli 2019

Das Problem hat man auch, wenn man seine Bilder in figure, weils ein Block-Element ist, packt und mit figcaption versieht, bspw. für Bildunterschriften.

Also wendet man die Media-Queries auf den äußeren Container, also z.B. das figure oder dein DIV an und gibt dem Bild immer eine width von 100%. Die 100% des Bildes beziehen sich dann ja auf den Platz, den der umgebende Container hergibt. Wenn der skaliert, skaliert das Bild mit.

Mein .item-image oben ist bei mir z.B. immer eine figure-Klasse. Das mit dem Bild habe ich vergessen zu erwähnen.

Zugegebenermaßen vielleicht anfänglich etwas Fieselei, wenn z.B. andere CSSe schlauer sein wollen, aber geht schon.

Clemens-XS · 16. Juli 2019

Vielen Dank für deine Geduld mit meinen Wissenslücken und deine schnelle Antwort!

Ich hab gerade das ausprobiert, was du vorgeschlagen hast und Varianten davon – leider ohne den gewünschten Erfolg, wie die angehängten Screenshots zeigen.

Zunächst habe ich in der CSS-Datei das img-Tag mit width 100%; height: auto; definiert. Im HTML der Artikel habe ich in den Aufruf eines Bildes keine weitere Klasse eingefügt, also <img src=....jpg"/>

Dem Bild-Aufruf habe ich vorangestellt: <div class="cl-art-img">

Dann habe ich drei verschiedene @media-Definitionen für die Klasse definiert, sodass die CSS so aussieht:

Code

img {
width: 100%
height: auto;
}

.cl-art-img {
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: left;
}

@media (max-width: 700px) {
.cl-art-img {
    border: solid 3px red;
    width: 60%;
    }
}

/*

@media (min-width: 600px) {
    .cl-art-img {
        border: solid 1px blue;
        width: 75%;
    }
}

@media (min-width: 700px) {
    .cl-art-img {
        border: solid 1px red;
        width: 100%;
    }
}

Alles anzeigen

Die Border-Definitionen habe ich eingefügt, um im Browser sehen zu können, ob und wie sich die @media-Regeln auswirken. Dies sieht man in den drei Screenshots "A-Versuch_...."

Dann habe ich die @media-Regeln vereinfacht auf eine einzige, damit das Ganze übersichtlicher und evtl. verständlicher wird:

Code

img {
width: 100%
height: auto;
}

.cl-art-img {
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: left;
}

@media (max-width: 700px) {
.cl-art-img {
    border: solid 3px red;
    width: 60%;
    }
}

Alles anzeigen

Das Ergebnis ist in den drei Screenshots "B-Versuch_..." zu sehen. Die gewünschte Skalierung entsteht nicht durch die @media-Regel, sondern durch die Begrenzung durch den Viewport!

Und es ist sichtbar, dass sich der Prozentsatz in der Defintion der Klasse ".cl-art-img" auf den gesamten verfügbaren Platz des übergeordneten Containers bezieht während das Bild nicht skaliert, solange der verfügbare Raum der View-Breite ausreicht.

Keine Ahnung, wie das nun weiter gehen kann. Im Firefox-Inspector habe ich nicht erkennen können, dass mir hier eine CSS-Vererbung einen Streich spielt. Ich fand aber Definitionen wie z.B. ".mobile_showcase img". Vermutlich gilt diese Definition für das img nur dann, wenn das img in Verbindung mit der KLasse ".mobile_showcase"?

Vielleicht sollte ich meine img-Definition an meine zugehörige Klasse ".cl-art-img" binden, um übergeordnete / vererbte Einfüsse auf das img-Tag auszuschließen?

Clemens-XS · 16. Juli 2019

Hab weiter versucht, aber dieses Mal unter der Annahme, dass sich der Prozentsatz der KLasse ".cl-art-img" nicht auf das Maß des Bildes bezieht, sondern immer auf die Gesamtbreite des darüber liegenden Container. Dieses kann der Container des Artikels sein, den das Template bereit stellt oder auch (wie bei mir im zweiten Anwendungsfall) die Showcase-Definitionen des Modul RokSprocket.

Mit den folgenden CSS-Definitionen komme ich dem schon nahe, was ich ursprünglich visuell erreichen wollte:

Code

.cl-art-img img {
width: 100%;
}

.cl-art-img {
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: left;
    width: 30%;
}

@media (max-width: 500px) {
.cl-art-img {
    border: solid 3px red;
    width: 40%;
    }
}

@media (min-width: 800px) {
    .cl-art-img {
        border: solid 1px blue;
        width: 20%;
    }
}

Alles anzeigen

Der Haupt-Unterschied besteht darin, dass die Prozentzahl KLEINER wird, je GRÖßER die Breite in der @media-Regel ist. Das hatzte ich bei den bisherigen Versuchen umgekehrt gehalten. Genau dies war die Ursache für die bisherigen Fehlversuche.

Re:Later · 16. Juli 2019

Ich bin oft zu faul zu lesen. Hier 2 Demos wie ich es meinte.

Ohne Queries: https://re-later.eu/figcaption.php

Mit QUeries: https://re-later.eu/figcaption2.php

Clemens-XS · 16. Juli 2019

Vielen Dank dir! Die von mir im vorigen Post gezeigte Lösung entspricht genau deinem zweiten Link. Und wenn ich die Prozentzahlen in Verbindung mit der Media-Query geschickt wähle, erreiche ich zugleich als „Nebenwirkung”, dass der Textbereich neben dem Bild nie unsinnig schmal wird, oder aber dass rechtzeitig, bevor er endgültig zu schmal würde, die Eigenschaft "float-left" rausgenommen wird.

Herzlichen Dank für deine Unterstützung! Ohne die hätte ich wahrscheinlich noch lange herumprobiert.

Clemens-XS · 16. Juli 2019

In meinem CSS stckte doch noch ein Bug betr. @media min-width und @media max-width. Deshalb jetzt noch mal meine jetzt vorgenommene Unterteilung als CSS in vollem Umfang, damit andere es ggfs. einfach kopieren können:

Code

.cl-art-img img {
width: 100%;
}

.cl-art-img {
    margin-right: 1em;
    margin-bottom: 0.5em;
    float: none;
    width: 70%;
}

@media (min-width: 320px) {
.cl-art-img {
    border: solid 3px red;
    width: 55%;
    float: none;
    }
}

@media (min-width: 450px) {
.cl-art-img {
    border: solid 3px red;
    width: 45%;
    float: left;
    }
}

@media (min-width: 650px) {
    .cl-art-img {
        border: solid 3px blue;
        width: 35%;
        float: left;
    }
}

@media (min-width: 800px) {
    .cl-art-img {
        border: solid 3px green;
        width: 30%;
        float: left;
    }
}

@media (min-width: 950px) {
    .cl-art-img {
        border: solid 3px red;
        width: 20%;
        float: left;
    }
}

Alles anzeigen

Die Übergänge und Relationen zwischen den Prozentsätzen und den Pixelwerten in den @media-Queries habe ich durch Ausprobieren gefunden mit dem Ziel, dass die Sprünge in der Bildgröße zwischen zwei Media-Breiten nicht so extrem ausfallen.

addi · 16. Juli 2019

Mit width: 100% skaliert ein Bild auf die volle Breite des übergeordneten Containers. Mit zusätzlichem max-width: 100% wird sich ein Bild maximal auf die Pixelbreite des Bildes strecken. Height ist immer auto, wenn nicht explizit anders angegeben und kann weggelassen werden.

Clemens-XS · 16. Juli 2019

Danke dir! Das war das i-Tüpfele für die ganz großen Displays.

Tags