nicht angemeldet einsiedler
einsiedler
Gunnar Bittersmann
einsiedler
dedlfix
einsiedler
einsiedler
Moin, moin,
ich habe folgendes Problem, die Breite eines div`s soll sich jeweils (variabel) dem Inhalt anpassen, den Wert habe ich mit php errechnet und als Variable $newwidth gespeichert:
Matthias Apsel
JürgenB
Der Martin<script type="text/javascript">
<!--
function BreiteAendern()
{
document.getElementById("fotobox").style.width = < HIER die Variable >;
}
//-->
</script>
WIE macht man Das korrekt????
Der Variabel soll den Wertetyp VW haben (keine px oder ähnlichges!)
Wie schreibt man soetwas richtig, das das div "fotobox" die width: $newwidth vw; erhält?
Ist ein verändern des width-Wertes (in einer externen CSS) in php möglich? Denn würde das javascript immer funktionieren?
Vielen Dank für eure Antworten!
Grüsse dersiedler
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BLABLABLABLUPP</title>
<style type="text/css">
#fotobox {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
-webkit-align-items: center;
-moz-align-items: center;
-ms-flex-align-items: center;
align-items: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-flex-justify-content: center;
justify-content: center;
background-color: #ffffff;
width: <<< DER ZU VERÄNDERNDE WERT -- VARIABLE variablebreite >>> vw;
height: auto;
border: 1px dashed grey;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".variablebreite").click(function(){
var newWidth = $(".variablewidth").val();
$(".box").width(newWidth);
});
});
</script>
</head>
<body>
<div id = "fotobox" class = "variablebreite">
img ++++++++
</div>
</body>
</html>
Ist das im ansatz korrekt???? Oder wie macht man das richtig!
Wäre es möglich soetwas auch in php zu schreiben????
Denn was ist, wenn scripte gesperrt werden????
Grüsse dersiedelnde
@@einsiedler
display: -webkit-flex;
Für etwas betagtere Safaris und Androids kann man das noch drin lassen.
display: -moz-flex;
Weg damit.
display: -ms-flex;
Nein, IE 10 braucht die alte Syntax – mit Präfix. IE 11: neue Syntax, präfixfrei.
Für align-items und justify-content entsprechend.
background-color: #ffffff;
Warum nicht white?
width: <<< DER ZU VERÄNDERNDE WERT -- VARIABLE variablebreite >>> vw;
Du meinst sowas?
width: <?php echo htmlspecialchars($newwidth); ?>vw;
(Je nach Herkunft von $newwidth kann htmlspecialchars() evtl auch entfallen.)
Du kannst auch externe CSS-Ressourcen mit PHP generieren. Das sollte dann mit header('Content-Type: text/css'); losgehen.
Was du mit dem JavaScript erreichen willst, geht aus deiner Beschreibung nicht hervor.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hi Gunnar,
Korrekturen:
display: -webkit-flex;
display: flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-justify-content: center;
justify-content: center;
???
Eine Bildergalerie: ein umschliessendes div (Einheit vw) soll ein img (unterschiedliche Formate / horiz und vertik. / Höhen und Breiten) "einzwängen" und so korrekt skalieren. (die Höhe beträgt fix 36.459vh / (ca. 700 px))
Den width Wert ($newwidth : vw) errechne ich (mit Dreisatz) aus der img grösse (getimagesize), so soll das width des divs das img "einzwängen" und ein skalieren verhindern.
Achso: img, video { margin: 0; padding: 0; width: 100%; height: auto; }
Meine Theorie.....
Javascripte möchte ich ungern verwenden und ich fänd eine reine PHP Lösung besser. Bis jetzt ist das meiste in PHP geschrieben.
Ich habe versucht eine "externe" css datei "zu beeinflussen" mit dem Ergebnis das es nicht funktionierte, bis jetzt.
In meiner html Datei hab ich direkt nach <head> die Berechnung angestellt:
<?php $newwidth = ($values['file']['width'] * 36.459 / 700); ?>
Dabei ist der wert 36.459 die maximalste (width)-Breite und ich habe mal das Ergebnis mit echo wiedergegeben, er stimmt!
Dann habe ich in der externen css Datei bei width folgendes geschrieben:
width: <?php header('Content-Type: text/css'); echo $newwidth;?> vw;
Aber das bewirkte nichts! warum auch immer .....
Nunja, weiter im Text....
Hallo
Ich habe immer noch nicht verstanden was du erreichen willst.
Wenn die Höhe fix ist reicht doch die Angabe "display: inline-block" aus.
Gruss
MrMurphy
@@MrMurphy1
Ich habe immer noch nicht verstanden was du erreichen willst.
Ich auch nicht. Ich bin mir aber dennoch ziemlich sicher, dass die Lösung weder PHP noch JavaScript beinhaltet.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Neee...
Die blauen Linien sind die imgs (hier einmal eine horizontal breite Variante und ein vertikal hohes img (gestrichelt)) Die orangene Linie (das fotobox - div) soll in der Breite (width) durch das img "ausgedehnt" werden. Die Höhe des fotobox - divs ist fix 36.459vh / (ca. 700 px)
Ich verwende die Einheit vw und vh (sowohl beim content-frame als auch bei den bottonboxen als auch
bei der fotobox um beim "Bildschirmverkleinern" / "Bildschirmverschmalern" jeweils eine angepasste
grösse erhalte (vorallem beim img).
Wenn ich aber strg++ mache, das sich dann nichts gross vergrössert+verkleinert.
Darum geht es mir!
Ich möchte das img "einrahmen", den mein Problem sind die unterschiedlichen Bildformate, extrem breite als auch schmale / hohe, also das sich die img`s dem foto-div anpasst. Width müsste also wegen der unterschiedlichen Bild-Formate eine Variable sein (also der neu errechnete $newwidth Wert!) DAS ist mein width Wert für die fotobox, um das ganze "einzuklemmen".
Ich habe versucht meine "externe" css Datei so "zu beeinflussen" das das width in #fotobox also diese Variable $newwidth erhält. Aber es funktioniert nicht, bis jetzt.
In meiner html-Datei hab ich direkt nach <head> die Berechnung gemacht:
<?php $newwidth = ($values['file']['width'] * 36.459 / 700); ?>
Dabei ist der wert 36.459 die maximalste (width)-Breite (orange) und ich habe mal das Ergebnis mit echo wiedergegeben, er stimmt!
Dann habe ich in der externen css Datei bei width folgendes geschrieben:
width: <?php header('Content-Type: text/css'); echo $newwidth;?> vw;
Aber das bewirkte nichts! warum auch immer ....
@@einsiedler
Die blauen Linien sind die img`s (hier einmal eine horizontal breite Variante und ein vertikal hohes img (gestrichelt)) Die orangene Linie (das fotobox - div) soll in der Breite (width) durch das img "ausgedehnt" werden.
Das tut sie aber in deiner Zeichnung nicht. Das „blaue“ Bild hat in der Höhe noch Luft, könnte sich also in der Breite noch weiter ausdehnen. Von einer Begrenzung durch die Schaltflächen links und rechts hast du nichts gesagt.
Beschreibe doch mal bitte verständlich, was du erreichen willst.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Naja ....
Schiebt man den Browser-Bildschirm zusammen, verkleinert ihn, dann sollte sich ja alles proportional
zusammenziehen / verkleinern (auch die Fotos in der fotobox).
Wenn jetzt das img die maximalste breite, also hier die durchgezogene orangene Linie erreicht hat,
ab da verkleinert sich das img proportional.
Bei horizontal breiten imgs die die maximalste breite (die durchgezogene orangene Linie) von Anfang an haben, ist das kein Problem, nur bei schmaleren imgs (in meiner Zeichnung das gestrichelte blaue img) wo eben rechts und links
noch Rand ist, da ist ein Problem.
Deshalb möchte ich erreichen, das das fotobox div die Breite des img animmt, hier die gestrichelte
orangene linie, somit verkleinert sich beim zusammenschieben sofort alles proportional.
Dazu müsst ihr wissen, das ich dem content-frame (dieses rötliche div ganz aussen) ein
justify-content: space-between; mitgegeben habe. Also ordnen sich die botton divs rechts und links
aussen an, das foto-div eben mittig.
Für mich benötigt das width in #fotobox eine Variable, die jeweils den Wert je nach Breite des
img annimmt.
Punkt 2: Bei schmalen hochkantigen Fotos (Beispiel mit rechts und links Rand) in dem Fall vergrössert sich bei strg++ zuallererst das img bis es die durchgezogene orangene Linie erreicht, ab da vergrössert sich das img. Das ist nicht der Fall wenn das img die Breite bis zur durchgezogenen orangenen Linie schon hat. Wenn also width in #fotobox jeweils die Breite des img animmt dann passiert soetwas nicht. Bei den beiden Problemen.
Hoffe jetzt ist es verständlich!
Hallo einsiedler,
Deshalb möchte ich erreichen, das das fotobox div die Breite des img animmt,
Es ist wahrscheinlich besser, das Bild zu zentrieren
img {
display: block;
margin: 0 auto;
}
und dem Bild noch geeignete maximale Abmessungen in Prozent mit auf den Weg zu geben.
Bis demnächst
Matthias
Hallo,
hast du schon mal versucht, den Bildern eine maximale Größe (max-width, max-height) zu geben? Hier kannst du als Einheit Prozentwerte von der Größe des Browserfensters (vw, vh) nehmen.
Gruß
Jürgen
@@einsiedler
Korrekturen:
display: flexbox;
Versteht IE 10 nicht. Ich hätte sagen sollen, dass IE 10 die alte Syntax mit Präfix braucht. Oh, …
-ms-flex-justify-content: center;
Versteht IE 10 nicht. Ich hätte die alte Syntax verlinken sollen. Oh, …
S.a. Flexbox syntax for IE 10 (Zoe Gillenwater).
(die Höhe beträgt fix 36.459vh / (ca. 700 px))
Nein. 36.459vh sind nicht 700px. Nicht einmal zirka.
Das mag vielleich bei dir so sein, wenn du dein Browserfenster auf eine bestimmte Größe ziehst. Bei anderen sieht das ganz anders aus …
Allgemein gibt es keinen Zusammenhang zwischen vh und px. Das liegt in der Natur der Sache.
In meiner html Datei hab ich direkt nach <head> die Berechnung angestellt:
<?php $newwidth = ($values['file']['width'] * 36.459 / 700); ?>
… Die Berechnung ist damit sinnfrei.
Dann habe ich in der externen css Datei bei width folgendes geschrieben:
width: <?php header('Content-Type: text/css'); echo $newwidth;?> vw;
Aber das bewirkte nichts! warum auch immer .....
Weil header() an der Stelle nichts zu suchen hat.
Weil das Leerzeichen an der Stelle nichts zu suchen hat.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Gut, ich habe es jetzt auch bemerkt, es stimmt 36.459vh sind NICHT 700px. Ich hatte da anstatt vh vw stehen. Laut ein wenig Pixel schieben sind es wohl 76.811vh; ... ca. grob.... ersteinmal....
zu 1) Weil header() an der Stelle nichts zu suchen hat.
Wo müsste er dann stehen? Habe ihn im html gehabt, aber eine Fehlermeldung erhalten.
zu 2) Weil das Leerzeichen an der Stelle nichts zu suchen hat.
welches leerzeichen?
Gut, wie geht es denn richtig, also eine variable im css zu setzen?
Grüsse einsiedl
@@einsiedler
Gut, ich habe es jetzt auch bemerkt, es stimmt 36.459vh sind NICHT 700px. Ich hatte da anstatt vh vw stehen. Laut ein wenig Pixel schieben sind es wohl 76.811vh; ... ca. grob.... ersteinmal....
Du willst jetzt aber nicht erzählen, 76.811vh wären 700px?
Mein Browserfenster ist 320 Pixel hoch; da sind 76.811vh nur knapp 246 Pixel.
Warum willst du deine Bildergalerie auf einen solch schmalen Streifen begrenzen?
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hallo einsiedler,
Gut, ich habe es jetzt auch bemerkt, es stimmt 36.459vh sind NICHT 700px.
Ich hatte da anstatt vh vw stehen.
Laut ein wenig Pixel schieben sind es wohl 76.811vh; ... ca. grob.... ersteinmal....
Lies bitte wiki/vh.
Bis demnächst
Matthias
Hallo,
Gut, ich habe es jetzt auch bemerkt, es stimmt 36.459vh sind NICHT 700px.
Ich hatte da anstatt vh vw stehen.
das ändert nichts am Prinzip.
Laut ein wenig Pixel schieben sind es wohl 76.811vh; ... ca. grob.... ersteinmal....
Nein. 76.811vh sind 76.811% der Browserfensterhöhe. Also bei jedem Besucher ein bisschen anders.
zu 1) Weil header() an der Stelle nichts zu suchen hat. Wo müsste er dann stehen?
Auf jeden Fall vor dem ersten Zeichen der Nutzdaten. Aber lässt du denn in CSS-Ressourcen überhaupt PHP ausführen? Dazu müsste man entweder in die Serverkonfiguration eingreifen oder das Stylesheet auf *.php umbenennen.
Habe ihn im html gehabt, aber eine Fehlermeldung erhalten.
Wenn du solche Hinweise gibst, dann verrate nur ja nicht, welche Fehlermeldung.
zu 2) Weil das Leerzeichen an der Stelle nichts zu suchen hat. welches leerzeichen?
Das vor der Einheit. In CSS darf zwischen Zahl und Einheit kein Leerzeichen stehen.
Gut, wie geht es denn richtig, also eine variable im css zu setzen?
Die Frage ist: Führt dich das überhaupt zum Ziel? Ich vermute, nein. Irgendjemand im Thread hatte schon vorgeschlagen, max-width und/oder max-height zu verwenden. Ich überblick's noch nicht genau, aber ich vermute auch, das könnte ein sinnvoller Ansatz sein.
Aber serverseitig (PHP) schon auf clientseitige Bedingungen (Bildschirm- oder Fenstergröße) zu reagieren, die der Server gar nicht kennt ... das klingt paradox.
So long,
Martin
@@Der Martin
Also bei jedem Besucher ein bisschen anders.
Wobei ich die Unterschiede eher „gewaltig“ als „ein bisschen“ nennen würde. Darf’s ein bisschen mehr sein?
Aber serverseitig (PHP) schon auf clientseitige Bedingungen (Bildschirm- oder Fenstergröße) zu reagieren, die der Server gar nicht kennt ... das klingt paradox.
Darauf Brief und Siegel.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hallo Gunnar Bittersmann,
Darauf Brief und Siegel.
Da wollte ich dem Cheatah jetzt seine ersten 10 Punkte zukommen lassen, da wars gar nicht der Cheatah.
Bis demnächst
Matthias
@@Gunnar Bittersmann
Wobei ich die Unterschiede eher „gewaltig“ als „ein bisschen“ nennen würde.
Da fehlte ein „mächtig“. Mensch, Egon!
LLAP 🖖
PS. Das verstehen wohl nur solche mit entsprechender Sozialisation. ;-) Macht nichts. Нихт фюр Вессис.
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Moin,
Wobei ich die Unterschiede eher „gewaltig“ als „ein bisschen“ nennen würde.
Da fehlte ein „mächtig“. Mensch, Egon!
Krenz?
PS. Das verstehen wohl nur solche mit entsprechender Sozialisation. ;-)
Vermutlich. Willst du die anderen dumm st^W^W im Dunkeln stehen lassen?
Macht nichts. Нихт фюр Вессис.
Es sei denn, sie können kyrillisch lesen. :-)
Ciao,
Martin
@@Der Martin
Wobei ich die Unterschiede eher „gewaltig“ als „ein bisschen“ nennen würde.
Da fehlte ein „mächtig“. Mensch, Egon!
Krenz?
Nein, Olsen.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Zitat: Aber serverseitig (PHP) schon auf clientseitige Bedingungen (Bildschirm- oder Fenstergröße) zu reagieren, die der Server gar nicht kennt ... das klingt paradox.
Gut, leuchtet mir ein, anfangs hab ich auch mit einer javascript-Lösung angefangen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BLABLABLABLUPP</title>
<style type="text/css">
#fotobox {
display: -webkit-flex;
display: flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align-items: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-justify-content: center;
justify-content: center;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".variablebreite").click(function(){
var newWidth = $(".variablewidth").val();
$(".box").width(newWidth);
});
});
</script>
</head>
<body>
<div id = "fotobox" class = "variablebreite">
<figure>
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/BER-Pictogram.svg/200px-BER-Pictogram.svg.png" alt="Beispielbild"> -->
<img src="https://upload.wikimedia.org/wikipedia/commons/3/37/Swissair-Flugzeug.jpg" alt="Beispielbild">
</figure>
</div>
</body>
</html>
Ich möchte erreichen das sich das img weder bei strg++ vergrössert und sich beim Browserzusammenschieben ordentlich skaliert verkleinert. Ich habe auch schon daran gedacht die "schmalen und hohe Fotos" als png mit unsichtbaren layer also mit rechten und linken Rand zu bearbeiten. So haben sie ja die feste 49.48vw Breite. DAS aber ungern....
seufZ
Hallo einsiedler,
ich bin der festen Überzeugung, dass JavaScript nicht notwendig ist. (Wenn überhaupt, wäre es sinnvoll, das Bild zu verändern und nicht den umgebenden Container)
Ich möchte erreichen das sich das img weder bei strg++ vergrössert
Das sollte durch eine Angabe von max-width: 42vw möglich sein
und sich beim Browserzusammenschieben ordentlich skaliert verkleinert.
Das durch width: 93%.
Ich habe auch schon daran gedacht die "schmalen und hohe Fotos" als png mit unsichtbaren layer also mit rechten und linken Rand zu bearbeiten. So haben sie ja die feste 49.48vw Breite.
49.48vw IST KEINE FESTE BREITE (Sag mal, liest du überhaupt, was man dir schreibt?)
Du brauchst übrigens nicht am Ende jeder Zeile Enter zu drücken.
Bis demnächst
Matthias
Hallo
Ich möchte erreichen das sich das img weder bei strg++ vergrössert und sich beim Browserzusammenschieben ordentlich skaliert verkleinert.
schau dir mal diese Seite an. Du musst auf eines der Fotosymbole auf der Karte klicken. Dann verändere mal die Größe des Browserfensters oder drück Strg+. (Wegen „Transition“ reagiert die Seite auf Größenänderungen etwas verzögert.) Ist es das, was du suchst?
Gruß
Jürgen
Hallo JürgenB,
schau dir mal diese Seite an.
Hey, die Anregung für die Rundtour kam ja von mir umme Ecke.
Bis demnächst
Matthias
Hallo
Hey, die Anregung für die Rundtour kam ja von mir umme Ecke.
du wohnst auch in einer sehr schönen Gegend. Andere machen da Urlaub :)
Gruß
Jürgen
@@JürgenB
Hey, die Anregung für die Rundtour kam ja von mir umme Ecke.
du wohnst auch in einer sehr schönen Gegend. Andere machen da Urlaub :)
Matthias auch. ;-)
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hallo JürgenB,
schau dir mal diese Seite an.
Wenn du das jetzt noch mit OSM machst, bin ich begeistert ;-)
LG,
CK
Hallo
Wenn du das jetzt noch mit OSM machst, bin ich begeistert ;-)
die OSM-Karten habe ich schon eingebunden, nur an eine der OSM-APIs habe ich mich noch nicht ran getraut. Aber das muss ich irgendwann umsetzen, da Google wieder mit den API-Keys anfängt.
Gruß
Jürgen
Tach!
(Je nach Herkunft von
$newwidthkannhtmlspecialchars()evtl auch entfallen.)
Nicht die Herkunft ist entscheidend. Auf den Inhalt kommt es an. Und den Kontext. Der ist da nämlich nicht HTML sondern erstmal CSS - und dann erst HTML. Beim Inhalt ist die Frage, ob er vollständig bekannt ist oder ob er auch nur teilweise unbekannt ist. Im ersten Fall ist die nächste Frage, ob er Zeichen mit besonderer Bedeutung enthalten kann. Im zweiten Fall muss man unbedingt davon ausgehen.
dedlfix.
@@dedlfix
(Je nach Herkunft von
$newwidthkannhtmlspecialchars()evtl auch entfallen.)Nicht die Herkunft ist entscheidend. Auf den Inhalt kommt es an.
„Herkunft“ meinte ich in dem Sinne „der Inhalt kommt aus einer numerischen Berechnung (her)“. War vielleicht hier nicht der beste Begriff.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|
Hallo
Ich habe mal ein Beispiel auf einer Testseite erstellt. Leider funktioniert es nicht hundertprozentig. Vielleicht können andere User da noch weiterhelfen. Erst mal der Quellcode:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Flexbox mit Bild 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
<![endif]-->
<style>
@media all {
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
font-size: 120%;
line-height: 1.3;
}
body {
width: 96%;
margin: 1rem auto;
}
}
@media all {
.foto-content {
/*width: 80vh;*/
width: 100%;
max-width: 100vh;
height: 60vh;
border: 4px solid hsla(300, 100%, 50%, 1);
display: flex;
justify-content: space-between;
}
.foto-content div {
border: 4px solid hsla(120, 100%, 20%, 1);
display: flex;
align-items: flex-end;
}
.foto-content div p {
font-size: 2rem;
margin: 0 0.5rem;
}
.foto-content figure {
border: 4px solid hsla(16, 100%, 66%, 1);
min-width: 0;
max-width: 100%;
min-height: 0;
margin: 0;
}
img {
display: block;
min-width: 0;
max-width: 100%;
max-height: calc(80vh - 16px);
border: 0;
}
}
</style>
</head>
<body>
<main role="main">
<section class="foto-content">
<div>
<p>◁</p>
</div>
<figure>
<!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/BER-Pictogram.svg/200px-BER-Pictogram.svg.png" alt="Beispielbild"> -->
<img src="https://upload.wikimedia.org/wikipedia/commons/3/37/Swissair-Flugzeug.jpg" alt="Beispielbild">
</figure>
<div>
<p>▷</p>
</div>
</section>
</main>
</body>
</html>
Und kurzzeitig als Beispiel direkt zum Anschauen und testen:
http://boratb.bplaced.net/index1.html
Die Größe und Höhe des umgebenden Containers kann natürlich noch angepasst werden, auch mit anderen Einheiten.
Folgendes Problem bekomme ich nicht gelöst:
Bei senkrechten Bildern ragt das Bild beim Skalieren teilweise unten und oben über den Rahmen hinaus.
http://boratb.bplaced.net/index2.html
einsiedler, es wäre schön wenn du mitteilen würdest, ob mein Beispiel deinen Vorstellungen entspricht und in die richtige Richtung geht. Spiel auch mal etwas mit der Fensterhöhe und Breite rum.
Edith: Jetzt funktioniert es doch auch bei senkrechten Bildern.
Gruss
MrMurphy
Danke für Dein Beispiel MrMurphy,
die farbigen Rahmen sollen euch nur zur Anschauung dienen wie ich dort mit flexbox
(vercshachtelte div`s) vorgehe,
mein Design soll so (mit den Rahmen) im Endeffekt NICHT aussehen.
Zu deinem script: Im Prinzip ist alles so wie ich es mir vorstelle!
Ich prüfe es nocheinmal....
Hallo
Ich ging davon aus, dass dir bekannt ist, dass die Rahmen angepasst oder ganz ausgeblendet werden werden können.
Gruss
MrMurphy
Ich habe auch schon daran gedacht die "schmalen / hohe Fotos" als png mit unsichtbaren layer also mit rechten und linken Rand zu bearbeiten. So haben sie ja die feste 49.48vw Breite. DAS aber ungern....
seufZ
Hallo
Mich irritiert, dass du von "fester" 49.48vw Breite schreibst. VW und vh sind keine festen Werte, sondern eher von der Fenstergröße abhängige Verhältnisse.
Gruss
MrMurphy
Okay, "fest" ist falsch" .... "sich prozentual anpassend".... Das img hat max. 49.48vw (Bilder mit 950px Breite) / horizontal breit...
@@einsiedler
Das img hat max. 49.48vw (Bilder mit 950px Breite) / horizontal breit...
?? Versuchst du immer noch, eine Beziehung zwischen vw und px herzustellen, nachdem schon klargestellt wurde, dass es keine solche gibt?
Soll ich dir nochmal vorrechnen, dass 49.48vw 158 Pixel sind? 49,48/100 × 320 = 158,336. 158 Pixel, nicht 950.
Oder es sind 237½. 49,48/100 × 480 = 237,504.
Am besten, du vergisst, dass es sowas wie Pixel überhaupt gibt. Das ist (wenn es nicht gerade um dünne Linien geht) völlig nutzloses Wissen. Es führt nur zu Missverständnissen. Streiche Pixel aus deinem Vokabular.
LLAP 🖖
sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|