Wachstum des <img> unterbinden

einsiedler

Hallo liebe Forumer,

ich möchte mal, das ihr ausprobiert ob es funktioniert was ich vorhabe:

(Bei meinem Opera 49.0 / Firefox 57.0 und IE 11 scheint es zu funktionieren!)

Bitte gebt mal eine RÜCKMELDUNG!

Hier mein CSS dazu:

CSS

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;
    }

Alles anzeigen

Sicherlich kann da noch etwas wegfallen was nicht unbedingt nötig ist!

Hier beschreibe ich meine Absicht:

[Blockierte Grafik: http://www.welten-bau.de/test/img/anmerkungen1.jpg]

Ich hoffe ihr versteht mein Anliegen!

Wichtig ist zu erfahren ob es bei euren Browsern auch funktioniert!

Lieben Gruß der einsiedelnde

WilhelmMarx

Es tut mir leid, das zu sagen, aber es hat in meinem Browser nicht richtig funktioniert ... ich weiß nicht, ob ich es richtig gemacht habe, aber es hat nicht funktioniert ..

einsiedler

Was für ein Browser benutzt Du? Und wie äußert sich bei Dir das "nicht funktionieren"? Kannst Du villeicht ein Screenshot anfertigen?

Gruß der einsiedelnde

djheke

Versuch mal ein max-width:1300px; oder größer zu notieren.

Code

img {

display: block;

width: 100%;
max-width: 1300px; /* Oder eine andere Größe */


height: auto;

border: 1px dotted orange;




}

Alles anzeigen

einsiedler

Habe mal etwas anderes ausprobiert, das bei mir jedenfalls funktioniert (Opera 49.0 / Firefox 57.0 und IE 11)

Mein CSS dazu:

Code

section > div {width: 36rem; max-width: 85vmin; margin: 0 auto; border: 1px dotted steelblue;}
    
    .blog figure {
        max-width: 36rem;
        width: -moz-fit-content;
        width: -webkit-fit-content;
        display: -ms-inline-grid;
        -ms-grid-columns: fit-content;
        text-align: center;
        margin: -0.1rem;
        border: 1px dotted green;
    }
    .blog figure > figcaption {
        display: inline-block;
        -ms-grid-row: 2;
        margin-top: -0.3rem;
    }
    .blog figcaption {
        font-size: 0.97rem;
        padding-top: 0.6rem;
        border: 1px dotted indigo;
    }
    img {        
        width: 100%;
        height: auto;        
        border: 1px dotted orange;
    }

Alles anzeigen

Bitte testet es auch mal aus, also Schriftgröße vergrößern und auch das Browserfenster zusammenschieben UND auch beides zusammen...

Bitte gebt mal eine Rückmeldung mit Browerangabe eventuell ein Screensshot...

Achso hier noch mal der Link zur: TESTSEITE

Grüße der einsiedelnde

Jetzt mitmachen!