Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Jormungand" data-source="post: 2692746" data-attributes="member: 232651">Danke [USER=134786]@Myhar[/USER] für den Vorschlag. Ich muss bei dem HTML auf xhtml transitional zurückgreifen. Bei mir gab es da bisher immer wieder Probleme auf verschiedenen Endgeräten.Ich habe trotzdem object-fit getestet: Während die Bilder untereinander noch proportional richtig dargestellt werden, werden horizontal zwar die Bilder gleich hoch gemacht, aber die Proportionen verziehen sich.Danke [USER=520851]@Andre_S[/USER] aber es trifft nicht ganz mein Thema. Ich versuche über CSS Bilder, die vertikal angeordnet sind nach einem Breakpoint horizontal anzuordnen, wobei die Bilder im ersten Fall die selbe Breite, im zweiten die selbe Höhe haben sollen. Natürlich kann ich zwei Sets der Bilder anfertigen und durch display: none; jeweils eins der Sets ausblenden, aber ich suche nach einer einfacheren Lösung.Hier mal noch der Code, den ich verwendet habe:[CODE]&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;&lt;head&gt;&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0&quot; /&gt;&lt;title&gt;Bilder von vertikaler Anordung in die horizontale wechseln&lt;/title&gt;&lt;style type=&quot;text/css&quot;&gt;&lt;!--html, * {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;}html, body {&nbsp; &nbsp; background-color: #FFF;}body {&nbsp; &nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; &nbsp; font-size: 12px;}#main {&nbsp; &nbsp; width: 100%;}#container img {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;}#container {&nbsp; &nbsp; width: 300px;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;}@media only screen and (max-width: 500px) {img {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; /*object-fit: fill;*/&nbsp; &nbsp;&nbsp; /*object-fit: contain;*/&nbsp; &nbsp; /*object-fit: cover;*/&nbsp; &nbsp; /*object-fit: none;*/&nbsp; &nbsp; object-fit: scale-down;}#container {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; flex-direction: row;}#container img {&nbsp; &nbsp; float: left;}}--&gt;&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div id=&quot;main&quot;&gt;&nbsp; &lt;div id=&quot;content&quot;&gt;&nbsp; &nbsp; &lt;div id=&quot;container&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;1.png&quot; width=&quot;368&quot; height=&quot;368&quot; alt=&quot;Quadrat&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;2.png&quot; width=&quot;487&quot; height=&quot;297&quot; alt=&quot;Hochformat&quot;/&gt;&nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;3.png&quot; width=&quot;301&quot; height=&quot;385&quot; alt=&quot;Längsformat&quot;/&gt;&lt;/div&gt;&nbsp; &lt;/div&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/CODE]</blockquote>

[QUOTE="Jormungand, post: 2692746, member: 232651"] Danke [USER=134786]@Myhar[/USER] für den Vorschlag. Ich muss bei dem HTML auf xhtml transitional zurückgreifen. Bei mir gab es da bisher immer wieder Probleme auf verschiedenen Endgeräten. Ich habe trotzdem object-fit getestet: Während die Bilder untereinander noch proportional richtig dargestellt werden, werden horizontal zwar die Bilder gleich hoch gemacht, aber die Proportionen verziehen sich. Danke [USER=520851]@Andre_S[/USER] aber es trifft nicht ganz mein Thema. Ich versuche über CSS Bilder, die vertikal angeordnet sind nach einem Breakpoint horizontal anzuordnen, wobei die Bilder im ersten Fall die selbe Breite, im zweiten die selbe Höhe haben sollen. Natürlich kann ich zwei Sets der Bilder anfertigen und durch display: none; jeweils eins der Sets ausblenden, aber ich suche nach einer einfacheren Lösung. Hier mal noch der Code, den ich verwendet habe: [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <title>Bilder von vertikaler Anordung in die horizontale wechseln</title> <style type="text/css">  </style> </head> <body> <div id="main"> <div id="content"> <div id="container"> <img src="1.png" width="368" height="368" alt="Quadrat"/> <img src="2.png" width="487" height="297" alt="Hochformat"/> <img src="3.png" width="301" height="385" alt="Längsformat"/></div> </div> </div> </body> </html> [/CODE] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?