JQerleger: Problem mit flexibler img-Darstellung

problematische Seite

Hallo,

habe wohl doch viel zu lange Pause gemacht, um noch einigermaßen flüssig mit Html/CSS arbeiten zu können :(

Folgendes Problem bekomme ich nicht auf die Reihe: innerhalb der article-box aus dem Tutorial Flexbox-5, werden verschieden große Grafiken eingefügt. Mit

article img {
width: 100%;
height: auto;
}

werden zu große Grafiken auf 100% der Box herunter skaliert und kleine Grafiken dummerweise auf 100% hochskaliert.

Mit

article img {
max-width: 100%;
max-height: auto;
}

werden die kleinen und großen Grafiken in der original Größe angezeigt. Ich hätte aber schon gerne, das bei einer Boxgröße von 800px, die kleine Grafik (150px) mit 150px und die große Grafik (1200px) auf 800px skaliert wird.

Kann das überhaupt mit CSS gelöst werden??

  1. problematische Seite

    @@JQerleger

    article img {
    max-width: 100%;
    max-height: auto;
    }
    

    werden die kleinen und großen Grafiken in der original Größe angezeigt.

    ?? Nö, eigentlich nicht.

    Ich hätte aber schon gerne, das bei einer Boxgröße von 800px, die kleine Grafik (150px) mit 150px und die große Grafik (1200px) auf 800px skaliert wird.

    Kann das überhaupt mit CSS gelöst werden??

    Ja. So, wie du es hast. Beispiel

    Außer dass auto kein gültiger Wert für max-height ist. Eine max-height-Angabe brauchst du gar nicht.

    Lass mal sehen, warum das bei dir nicht hinhaut.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. problematische Seite

      Lass mal sehen, warum das bei dir nicht hinhaut.

      LLAP 🖖

      /* Grundlayout für SELFHTML-Beispiele */
      
      html {
              background: transparent!important;
      }
      
      body {
      	margin: 10px auto;
      	max-width: 60em;
      	font-family: sans-serif;
      	color: #333333;
      }
      
      h1, main, main svg {
      	border-radius: 0 8px 8px;
      	border: 1px solid;
      	padding: 10px;
      	margin: 10px;
      }
      
      h1 {
      	background: #F1F3F4 url("//wiki.selfhtml.org/images/9/99/Selfhtml-beispiel-logo.png") 10px 5px no-repeat;
      	border-color: #d5d5d5;
      	padding-left: 200px;
      }
      
      main {
      	display: block;     /* für IE */	
      	background: #c4ced3;
      	border-color: #8a9da8;
      	min-height: 400px;
      }
      
      #hinweis {                    /* für Container */
      	padding: 1em;    
      	margin: 2em auto;
      	width: 20em;
      	height: 10em;
      	background: #f1f3f4;
      	border-left: 5px solid #c32e04;
      }
      
      .hinweis {                    /* für Textzeile */
              color: #c32e04; 
              font-style: italic; 
              border-bottom: 1px dotted; 
              display:inline-block; 
      }
            body {
              display:-webkit-flex;
              display: flex;
              -webkit-flex-flow: row wrap;
              flex-flow: row wrap;
            }
       
            /* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
            header, nav, nav a, article, section, aside, footer {
              border-radius: 0px 0.5em 0.5em;
              border: 1px solid;
              padding: 10px;
              margin: 10px;
              -webkit-flex: 1 100%;
              flex: 1 100%;
            }
       
            header {
              background: #F1F3F4;
              border-color: #d5d5d5;
              display:-webkit-flex;
              -webkit-flex-flow: row wrap;
              display: flex;
              flex-flow: row wrap;
            }
            header * {
              -webkit-flex: 1 1 0;
              flex: 1 1 0;
            }
            header img {
              -webkit-flex: 0 0 150px;
              flex: 0 0 150px;
              margin-right: 20px;
            }
            header nav {
              -webkit-flex: 1 1 100%;
              flex: 1 1 100%;
            }
            nav, nav ul, nav li{
              margin: 0;
              padding:0;
              border:none;
            }
            nav ul {
              display: -webkit-flex;
              -webkit-flex-direction: column;
              display: flex;
              flex-direction: column;
            }
            nav li {
              list-style-type:none;
              margin: 1.3em 0;
              -webkit-flex: 1 1 100%;
              flex: 1 1 100%;
            }
            nav a {
              display:inline-block;
              width:95%;
              background: #fffbf0;
              border: 1px solid #dfac20;
              margin: 0;
              text-decoration: none;
              text-align: center;
            }
            nav a:hover {
              background-color: #dfac20;
            }
            section {
              background: #F1F3F4;
              border-color: slateblue;
            }
            article {
              background: #ffede0;
              border-color: #df6c20;
            }
            article img {
            max-width: 100%;
            }
            aside {
              background: #ebf5d7;
              border-color: #8db243;
            }
            footer {
              background: #e4ebf2;
              border-color: #8a9da8;
              display:-webkit-flex;
              -webkit-flex-flow: row wrap;
              display: flex;
              flex-flow: row wrap;
            }
            footer * {
              -webkit-flex: 1 1 0;
              -webkit-justify-content: space-between;
              flex: 1 1 0;
              justify-content: space-between;
            }
            footer p {
              text-align:right;
            }
            /* Smart Phones und Tablets mit mittlerer Auflösung */
            @media all and (min-width: 35em) {
            header img {
              margin-right: 50px;
            }
            nav ul {
              -webkit-flex-direction: row;
              flex-direction: row;
            }
            nav li {
              margin: 0 10px;
              -webkit-flex: 1 1 0;
              flex: 1 1 0;
            }
            article {
              webkit-order: 2;
              order: 2;
            }
            #news {
              -webkit-flex: 1 auto;
              -webkit-order: 3;
              flex: 1 auto;
              order: 3;
            }
            aside {
            /* durch auto werden die beiden asides in eine Zeile gesetzt */
              -webkit-flex: 1 auto;
              -webikit-order: 4;
              flex: 1 auto;
              order: 4;
            }
            footer {
              webkit-order: 5;
              order: 5;
            }
            }
       
           /* Large screens */
           @media all and (min-width: 50em) {
           article {
              /* Der Article wird 2.5x so breit wie die beiden asides! */
              -webkit-flex: 5 1 0;
              -webkit-order: 3;
              order: 3;
              flex: 5 1 0;
            }
            aside {
              flex: 2 1 0;
            }
            #news {
              -webkit-flex: 2 1 0;
              -webkit-order: 2;
              -webkit-align-self: center;
              flex: 2 1 0;
              order: 2;
              align-self: center;
              height: 120px;
            }
            }
      

      Das ist, bis auf die Zugabe

      article img {
      max-width: 100%;
      }
      die original CSS
      
      JQerlger
      
      1. problematische Seite

        Hallo JQerleger,

        Lass mal sehen, warum das bei dir nicht hinhaut.

        CSS allein ist nicht hilfreich. Ein hier gepostetes HTML + CSS nicht viel hilfreicher. Verlinke ein online-Beispiel.

        Bis demnächst
        Matthias

        --
        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
        1. problematische Seite

          CSS allein ist nicht hilfreich. Ein hier gepostetes HTML + CSS nicht viel hilfreicher. Verlinke ein online-Beispiel.

          Da könnte was dran sein: Das Oline-Beispiel

          1. problematische Seite

            Hallo

            Ich wollte mich bei den Antworten nicht dazwischendrängeln, aber hier tut sich wohl nichts mehr.

            Das Layout von selfhtml enthält leider einige Fehler. Von daher ist es als Vorlage nicht geeignet.

            Ich habe deshalb mal meine eigene Flexbox-Vorlage etwas an das von selfhtml angepasst und zwei Bilder eingefügt.

            Das gesamte CSS befindet sich im Quelltext der Datei. Ich stelle die Datei mal bereit unter

            http://kurokami.bplaced.net/

            Dann kannst du ihn direkt mit verschiedenen Auflösungen und Geräten testen.

            Gruss

            MrMurphy

            1. problematische Seite

              @@MrMurphy1

              Das gesamte CSS befindet sich im Quelltext der Datei. Ich stelle die Datei mal bereit unter

              http://kurokami.bplaced.net/

              </header role="banner">role="banner" möchte da weg.

              <main role="main">role="main" kann da weg.

              LLAP 🖖

              --
              „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
              „Hat auf dem Forum herumgelungert …“
              (Wachen in Asterix 36: Der Papyrus des Cäsar)
              1. problematische Seite

                Hallo Gunnar

                </header role="banner">role="banner" möchte da weg.

                …und auch nicht in das öffnende Tag.

                Für header die nicht Kind von article oder section sind, ist role="banner" der Defaultwert und dieser sollte nicht nochmals angegeben werden. Gleiches gilt für footer und role="contentinfo".

                <main role="main">role="main" kann da weg.

                Und <nav role="navigation"> ebenfalls.

                Gruß,

                Orlok

                --
                „Das Wesentliche einer Kerze ist nicht das Wachs, das seine Spuren hinterlässt, sondern das Licht.“ Antoine de Saint-Exupéry
            2. problematische Seite

              Servus!

              Das Layout von selfhtml enthält leider einige Fehler.

              @MrMurphy1 Könntest Du das bitte etwas ausführen? Es wäre wichtig, eventuelle Fehler in den Wiki-Seiten zu identifizieren und auszubessern.

              Von daher ist es als Vorlage nicht geeignet.

              Genau das sollte man dann auf jeden Fall ändern.

              Vielen Dank im Voraus. Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun - packen wir's an.
              1. problematische Seite

                @@MrMurphy1 Herzlichen Dank dir.

                Da wär ich mit Sicherheit nicht drauf gekommen. Kein Mensch ist Fehlerlos und bei einem so großen Projekt wie dem SelfHtml-Wiki darf das schon mal vorkommen. Und in diesem Sinne: ein großes Lob an alle Mitwirkenden hier.

                1. problematische Seite

                  Hallo JQerleger,

                  Kein Mensch ist Fehlerlos und bei einem so großen Projekt wie dem SelfHtml-Wiki darf das schon mal vorkommen. Und in diesem Sinne: ein großes Lob an alle Mitwirkenden hier.

                  Vielen Dank für das Lob. Und wenn du nur ein @ verwendest, dann klappt das auch mit der Notification, @JQerleger.

                  Bis demnächst
                  Matthias

                  --
                  Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                  1. problematische Seite

                    Hallo Matthias,

                    Und wenn du nur ein @ verwendest, dann klappt das auch mit der Notification, @JQerleger.

                    Aber nur, wenn der User auch registriert ist. Das ist hier nicht der Fall.

                    LG,
                    CK

                    1. problematische Seite

                      Hallo Christian Kruse,

                      Aber nur, wenn der User auch registriert ist. Das ist hier nicht der Fall.

                      Stimmt, habe ich übersehen. Er ist schon sehr lange dabei.

                      Bis demnächst
                      Matthias

                      --
                      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)