nicht angemeldet
CSS Bilder nebeneinander und asutomatisch anpassend
Matthias Apsel
AugeMoin,
Folgendes Problem. Ich habe 3 Bilder, die sich dynamisch anpassen sollen.
Diese 3 Bilder stehe in einem Div und sind per display:inline-block nebeneinander positioniert und überlappen sich. Die Bilder sind etwas groß. jetzt möchte ich dass bei FullHD die Bilder 80% ihrer Ausmessung haben und sich dann bei kleiner werdenden Viewport, im Verhältnis richtig verkleinern. Ich hoffe ihr versteht meine Problemstellung.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
Hallo bobby,
Folgendes Problem. Ich habe 3 Bilder, die sich dynamisch anpassen sollen.
Diese 3 Bilder stehe in einem Div und sind per display:inline-block nebeneinander positioniert und überlappen sich. Die Bilder sind etwas groß. jetzt möchte ich dass bei FullHD die Bilder 80% ihrer Ausmessung haben und sich dann bei kleiner werdenden Viewport, im Verhältnis richtig verkleinern. Ich hoffe ihr versteht meine Problemstellung.
Eine prozentuale Breitenangabe ist nicht zielführend? Entweder in
%oder invw.Bis demnächst
Matthias--
Signaturen sind bloed (Steel) und Markdown ist mächtig.-
Moin,
Eine prozentuale Breitenangabe ist nicht zielführend? Entweder in
%oder invw.nein, das es dann die Breite vom Elternelement annimmt und somit die Proportionen zwischen den Bildern nicht mehr stimmt.
Ist schwierig zu erklären.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo,
Ist schwierig zu erklären.
dann lade ein Online Beispiel bei http://jsfiddle.net/ oder http://codepen.io/ hoch. Dann wird es vielleicht etwas deutlicher.
-
Moin,
einziges problem waren die Startgrößen (also, wieviel % der Größe des umgebenden DIVS ist nun das Image), da die Images alles unterschiedlich breit sind
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-
-
Moin
Ich habs nu doch so gelöst, dass ich versucht habe über % Angaben die tatsächliche Größe in der Größten Auflösung zu emulieren. Also zum beispiel 23% des Originaldivs. Denn die Biloder sind ja unterschiedlich breit und Hoch
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Hallo
Ich habs nu doch so gelöst, dass ich versucht habe über % Angaben die tatsächliche Größe in der Größten Auflösung zu emulieren. Also zum beispiel 23% des Originaldivs. Denn die Biloder sind ja unterschiedlich breit und Hoch
Du hast die Wirkweise der vorgeschlagenen Einheit vw verstanden? Mit 10vw (viewport width) nimmt das damit ausgezeichente Element in seiner Breite oder auch Höhe 10% der Viewport- und damit Seitenbreite und nicht, wie bei „%“, der des mit einer Breitenangabe versehenen Elternelements ein. Ein Bild wird auf dieses Maß skaliert, egal, wie groß es im Original ist.
Beispiel zum Fenster kleiner und größer ziehen.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“
-
-
-
-
Hallo
Folgendes Problem. Ich habe 3 Bilder, die sich dynamisch anpassen sollen.
sich dann bei kleiner werdenden Viewport, im Verhältnis richtig verkleinern.
Meinst du so:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Bilder nebeneinander 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*Grundeinstellungen*/ @media all { * { box-sizing: border-box; } body { padding: 0; } /*Für IE 11*/ main { display: block; } div { overflow: hidden; border: 1px solid orange; } img { display: block; width: 33.33%; max-width: 100%; max-height: 100%; float: left; } } </style> </head> <body> <div> <img src="http://lorempixel.com/600/400/sports" alt="Beispielbild"> <img src="http://lorempixel.com/800/600/city" alt="Beispielbild"> <img src="http://lorempixel.com/500/300/nightlife" alt="Beispielbild"> </div> </body> </html>Gruss
MrMurphy
-
Moin,
img {...
width: 33.33%;Und genau hier lag das problem. Die Bilder sind eben nicht 33.33% des umgebenden DIVs groß von Unterschiedlich in der Breite. ein st 33% eins ist 40% und eins ist 27%
Und genau so hab ich das gelöst. :)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <- ### Henry L. Mencken ### -> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- ### Viktor Frankl ### ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)
-