Erledigt - In CSS Bilder auf die gleiche Breite bzw. Höhe bringen

Jormungand · 11.07.2018

Moin zusammen,

gibt es eine Möglichkeit, in CSS Bilder so zu konfigurieren, dass sie die gleiche Breite haben und nach einem Breakpoint die gleiche Höhe annehmen, dabei aber die Proportionen beibehalten?
Um das noch zu erschweren, darf kein JS und kein Flexbox eingesetzt werden.

Hier ist noch eine Grafik, die das Problem konkretisiert:

Beste Grüße
Jormungand

Myhar · 11.07.2018

Jormungand schrieb:
Um das noch zu erschweren, darf kein JS und kein Flexbox eingesetzt werden.

Warum nicht?
Mithilfe von object-fit solltest du dein Ziel doch erreichen können.

Andre_S · 11.07.2018

Einfach ausgedrückt du suchst was in dem man eine Maximalbreite/ -höhe und Proportionserhalt vorgeben kann?
Lade dir den IPP runter: https://sourceforge.net/projects/ps-scripts/files/Image Processor Pro/v3_2 betas/
und installiere ihn nach Anleitung.

Jormungand · 11.07.2018

Danke @Myhar 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 @Andre_S 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">
<!--
html, * {
    margin: 0;
    padding: 0;
}
html, body {
    background-color: #FFF;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
#main {
    width: 100%;
}
#container img {
    width: 100%;
    height: auto;
}
#container {
    width: 300px;
    display: flex;
    flex-direction: column;
}

@media only screen and (max-width: 500px) {
img {
    width: 100%;
    height: auto;
    /*object-fit: fill;*/
     /*object-fit: contain;*/
    /*object-fit: cover;*/
    /*object-fit: none;*/
    object-fit: scale-down;
}
#container {
    width: 100%;
    flex-direction: row;
}
#container img {
    float: left;
}
}
-->
</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>

Andre_S · 11.07.2018

Sorry, hatte CSS als CS (Ps CS) gelesen und "Breakpoint" als Haltemarke in einer Aktion verstanden.

Myhar · 11.07.2018

Jormungand schrieb:
Danke @Myhar 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.

Das verstehe ich ehrlich gesagt nicht. Wieso musst du xhtml transitional verwenden? Wie alt sind die Geräte, die du unterstützen musst? Und was ist die Zielgruppe deiner Website? Würde mich doch sehr interessieren

Kannst du dein Beispiel eventuell irgendwo online stellen? Ich tue mir schwer, dein Beispiel nachzustellen, da mir hier ja die Bilder fehlen.

Jormungand · 11.07.2018

Die Anzeigen sollen für Jobbörsen vorbereitet werden. Einige der Börsen sind auf einem ziemlich rückschrittlichen Stand und muss deshalb mit primitivsten Mitteln arbeiten.

Was die Bilder angeht, hatte ich nur Platzhalter verwendet. Ich habe die jetzt bei directupload hochgeladen, aber ich glaube, man kann sie nicht runterladen.

Gelöschtes Mitglied 633957 · 12.07.2018

Jormungand schrieb:
aber ich glaube, man kann sie nicht runterladen.

Alles was online ersichtlich ist kann man auch herunterladen.

In diesem Fall bietet DirectUpload sogar den Hotlink dazu an:

Gelöschtes Mitglied 633957 · 12.07.2018

Wie wäre es hiermit (nur eine Idee), sofern keine Browser älter als 5 Jahre genutzt werden?

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
<!--
html, * {
margin: 0;
padding: 0;
}
html, body {
background-color: #FFF;
}
#main {
width: 100%;
}
#content {
display: flex;
flex-flow: column wrap;
}
#content img {
width: 300px;
}
@media only screen and (max-width: 500px) {
#content {
display: flex;
flex-flow: row nowrap;
}
#content img {
width: auto;
max-height: 266px;
}
}
-->
</style>
</head>
<body>
<div id="main">
  <div id="content">
        <img src="1.png" alt="Quadrat"/>
        <img src="2.png" alt="Hochformat"/>
        <img src="3.png" alt="Längsformat"/>
  </div>
</div>
</body>
</html>

Sollte ab IE 11 und Firefox 28 laufen. Frühere Browser werden einen Präfix benötigen und der IE 10 die alte Syntax und außerdem display: inline-block fürs Wrapping in -ms-flex-flow. Das kann auch im IE 8 und 9 funktionieren, doch dafür würde ich nicht meine Hand ins Feuer legen.

Edit: Man kann natürlich noch Abstände mit Padding hinzufügen und die Pixelangabe aus der IMG-Breite loswerden, wenn das Design steht. max-height ist hier eine Krücke - nicht elegant aber funktioniert!

Jormungand · 13.07.2018

@tynick: Danke, das ist schonmal ein guter Ansatz. Das sollte sogar ohne Flexbox funktionieren. Allerdings sind die max-height: 266px; auf genau das Beispiel ausgezirkelt.

Kann man sagen, dass eine allgemeine Lösung für Bilder, deren Größen variieren nur mit JS zu lösen ist?

Gelöschtes Mitglied 633957 · 13.07.2018

Jormungand schrieb:
Allerdings sind die max-height: 266px; auf genau das Beispiel ausgezirkelt.

Nicht wirklich - vielmehr auf den 500px Media Query.
Die Idee dahinter ist zum einen, dass bei 500px Seitenbreite, die Bilder mutmaßlich nicht höher als 266px sein sollen. Somit ist man hier auf der sicheren Seite.
Zum anderen, dass die 266px dem Browser helfen die Proportionen bei der Anpassung zu erhalten. Für 266px habe ich mich entschieden, da ich davon ausgegangen bin, dass ein Bild nicht mehr als 3x so breit wie hoch ist - und mit 3 x 266 = 798px ist man auch bei geringen Bildschirmauflösungen (z.B. einer Breite von 1024px mit Nutzung einer Browser-Sidebar) im sicheren Bereich für eine korrekte Kalkulation.
Darüberhinaus werden die Bilder für die große Darstellung eh' eine Höhe von 266px überschreiten und so ist auch kein unschönes verpixeln bei sehr hohen Bildschirmauflösungen zu befürchten.
Wie groß die Bilder sind oder wieviele Bilder im Content-Container genutzt werden ist also unerheblich.
Man könnte auch eine max-height von z.B. 120px angeben - wo hingegen 50000px zu einem unerwünschten Ergebnis führen würden. Idealerweise bleibt man unter der Höhe des größten Bildes.

Jormungand · 13.07.2018

Super, vielen Dank für deine Hilfe!