Problem mit flexibler img-Darstellung

[JQerleger]

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??

[Gunnar Bittersmann]

@@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 🖖

[JQerleger]

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

[Matthias Apsel]

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

[JQerleger]

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

[MrMurphy1]

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

[Gunnar Bittersmann]

@@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 🖖

[Orlok]

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

[Matthias Scharwies]

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

[JQerleger]

@@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.

[Matthias Apsel]

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

[Christian Kruse]

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

[Matthias Apsel]

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