Geheimnisse der IMG - Skalierung
bearbeitet von einsiedlerHallo 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](http://www.welten-bau.de/test/img/gesamt_screen.jpg)
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:
~~~CSS
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
Geheimnisse der IMG - Skalierung
bearbeitet von einsiedlerHallo 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](http://www.welten-bau.de/test/img/gesamt_screen.jpg)
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:
~~~CSS
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
Geheimnisse der IMG - Skalierung
bearbeitet von einsiedlerHallo 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](http://www.welten-bau.de/test/img/gesamt_screen.jpg)
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:
~~~CSS
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 Bildschirm
fenster maximal zusammengeschoben ist, ist ein Folgeproblem!
Aber das müsste doch noch anders gehen oder? Nur wie?
Fragende Grüsse
der *geduldige* einsiedelnde
Geheimnisse der IMG - Skalierung
bearbeitet von einsiedlerHallo 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](http://www.welten-bau.de/test/img/gesamt_screen.jpg)
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:
~~~CSS
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!
Alle @media all and (max-width: 380.6px) {
body {
overflow-wrap: break-word;
}
}
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 Bildschirm
fenster maximal zusammengeschoben ist, ist ein Folgeproblem!
Aber das müsste doch noch anders gehen oder? Nur wie?
Fragende Grüsse
der *geduldige* einsiedelnde
Geheimnisse der IMG - Skalierung
bearbeitet von einsiedlerHallo 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](http://www.welten-bau.de/test/img/gesamt_screen.jpg)
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:
~~~CSS
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!
Alle @media all and (max-width: 380.6px) {
body {
overflow-wrap: break-word;
}
}
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"!
Aber das müsste doch noch anders gehen oder? Nur wie?
Fragende Grüsse
der *geduldige* einsiedelnde