Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „In CSS Bilder auf die gleiche Breite bzw. Höhe bringen“

Jormungand

VonAllemEtwas

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
 

Jormungand

VonAllemEtwas

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>
 

Myhar

Hat es drauf

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

VonAllemEtwas

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.
 
G

Gelöschtes Mitglied 633957

Guest

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!
 
Zuletzt bearbeitet von einem Moderator:

Jormungand

VonAllemEtwas

@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?
 
G

Gelöschtes Mitglied 633957

Guest

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.
 
Zuletzt bearbeitet von einem Moderator:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben