Bilder verschiedener Größen gleich darstellen

  • Hallo zusammen,


    ich habe eine Seite mit Referenzen, die natürlich Bilder von der fertigen Arbeit enthalten. Die Bilder sind aber mal im Hoch- und mal im Querformat., also unterschiedliche Breite und Höhe.


    Die Seite ist kategorisiert in einzelne Themenbereiche. Der einzelne Themenbereich wiederum hat jeweils zwei Bilder nebeneinander unter sich.


    HTML:


    CSS:


    Kann ich die Bilder noch irgendwie auf eine Höhe / Breite bringen? Wenn ich die Bilder im Hochformat auf die Höhe der im Querformat ändere, dann passt das zwar, aber dann ist zu viel Platz nach außen, das sieht dann auch blöd aus...


    Hat jemand einen Lösungsansatz für mich?


    Danke,


    Erik

  • Die Frage ist, was Du erreichen möchtest. Wenn Bilder im Hochformat die Breite voll ausfüllen, werden sie wiederum in der Höhe unverhältnismäßig groß. Mein Vorschlag: Die Bilder immer gleich groß machen und akzeptieren, dass dann bei denen im Hochformat seitlich Platz bleibt.

    Ist das Seitenverhältnis denn bei allen Bildern gleich?

  • PS: Du schriebst:

    Zitat

    Der einzelne Themenbereich wiederum hat jeweils zwei Bilder nebeneinander unter sich.

    Unter "Dachklempnerei" finde ich jedoch 7 Bilder. Möchtest Du diese jetzt in zwei Spalten anordnen, so dass jeweils zwei nebeneinander stehen?

  • Sempervivum danke für deine Antwort, sorry das ich jetzt erst antworte.



    PS: Du schriebst:

    Unter "Dachklempnerei" finde ich jedoch 7 Bilder. Möchtest Du diese jetzt in zwei Spalten anordnen, so dass jeweils zwei nebeneinander stehen?

    es sind ja immer zwei nebeneinander, hab es ja mit Spalten gelöst. Es geht wie in Beitrag #2 darum, die Bilder immer gleich groß darzustellen. Du meinst, dass ich die Bilder in der Größe ändern soll. Okay, das kann ich machen, ich dachte nur das es über HTML / CSS oder JS machbar wäre, die Größe des größeren Bildes so anzupassen, dass es die Größe des benachbarten Bildes hat.

  • OK, verstehe. Ich habe da mal etwas mit Flexlayout aufgebaut, wo die Bilder annähernd die selbe Größe haben:

    Prüfe, ob es in etwa deinen Vorstellungen entspricht.


    Man kann es auch mit Gridlayout machen, dann wären die Bilder in Form eines Rasters angeordnet und die Anordnung würde sich nicht von Zeile zu Zeile unterscheiden.


    Man kann die Bilder mit Javascript auch exakt auf die selbe Größe bringen, dann könnte man auf die Zuweisung von Klassen für Hoch- und Querformat verzichten.

  • danke für deinen Vorschlag, aber das ist nicht ganz was ich suchte....


    ich habe jetzt per js:

    Code
    1. var bild2_height = document.getElementById("bild1").height;
    2. document.getElementById("bild2").height = bild2_height;

    gemacht, dann wird die Größe von Bild2 von Bild1 genommen. Das ist soweit okay, aber wie kann ich Bild 2 jetzt aber zentrieren? Es sieht halt jetzt so aus:

    pasted-from-clipboard.jpg


    das rechte bild, also das zweite sollte dann weiter nach rechts, damit es ordentlich aussieht.


    Kann ich das CSS mit dem JS überschreiben? Ich hatte voreingestellt im css, dass height auf auto steht, dann greift der js code nicht mehr...

  • Zitat

    das rechte bild, also das zweite sollte dann weiter nach rechts, damit es ordentlich aussieht.

    Das kannst Du dann mit Flexlayout, für den Container display: flex; und justify-content: je nachdem, wie Du den freien Raum verteilen möchtest.

    https://css-tricks.com/snippet…exbox/#flexbox-properties


    Zitat

    Kann ich das CSS mit dem JS überschreiben? Ich hatte voreingestellt im css, dass height auf auto steht, dann greift der js code nicht mehr...

    CSS, das Du mit Javascript setzt, hat immer die höchste Priorität. Setze statt des Attributes height die Höhe unter style:

    document.getElementById("bild2").style.height = bild2_height + 'px';

  • Das kannst Du dann mit Flexlayout, für den Container display: flex; und justify-content: je nachdem, wie Du den freien Raum verteilen möchtest.

    https://css-tricks.com/snippet…exbox/#flexbox-properties


    CSS, das Du mit Javascript setzt, hat immer die höchste Priorität. Setze statt des Attributes height die Höhe unter style:

    document.getElementById("bild2").style.height = bild2_height + 'px';

    danke, das mit document.getElementById("bild2").style.height = bild2_height + 'px' klappt gut und ich muss für die einzelnen bilder das CSS nicht ändern.


    ich möchte noch einen eventlistener erstellen wenn das window-fesnter die größe ändert...


    Code
    1. function reportWindowSize() {
    2.   var bild2_height_resized = document.getElementById("bild1").height;
    3.   var bild4_height_resized = document.getElementById("bild3").height;
    4.   document.getElementById("bild2").style.height = bild2_height_resized + 'px'
    5.   document.getElementById("bild4").style.height = bild4_height_resized + 'px'
    6. }
    7. window.onresize = reportWindowSize;


    klappt gut.... jetzt probiere ich mich an der Ausrichtung.

  • ja danke, das hab ich geschafft...


    kann ich im container selbst die rows als flex darstellen und dann mit justify oder muss ich komplett auf flex umstellen und alle als flexboxen darstellen?


    habe es aktuell so:



    und im CSS

    Code
    1. .referenz-bilder > .container > .row:nth-child(1),
    2. .referenz-bilder > .container > .row:nth-child(2) {
    3.   display: flex;
    4.   justify-content: space-between;
    5. }


    aber das klappt nicht

  • Lege die beiden Bilder zusammen in einen Container und wende auf diesen das CSS mit Flex an:

    CSS
    1. .inner-row {
    2. display: flex;
    3. justify-content: space-around;
    4. }

    Damit das justify-content wirksam wird, braucht es jedoch freien Raum zwischen den Elementen. Und wo dieser liegt, kann man am besten mit dem HTML-Inspektor sehen. Wenn Du das online hast, dann poste die URL.

  • Bei breitem Browserfenster sieht das schon sehr gut aus aber wenn man es schmal zieht, werden die Bilder verzerrt. Mit Javascript kannst Du ja beliebig rechnen und die Höhe z. B. abhängig von der Fensterbreite machen. Was ich jedoch empfehlen würde ist, die Strategie des TO hier:

    https://stackoverflow.com/ques…with-unknown-aspect-ratio

    zu nehmen und das flex auf Grund des Seitenverhältnisses mit Javascript zu berechnen. Dann kannst Du die Bilder schön responsiv mit Flexlayout anordnen, so dass sie sich automatisch an der Breite des Browserfensters orientieren.


    Ich hatte auch mal eine reine CSS-Lösung für diese Aufgabe, kann die Lösung aber dummer Weise nicht wiederfinden :-(

  • So ist es einwandfrei responsiv und passt sich an die Breite an ohne dass man einen Listener für das resize braucht:

  • jau, das sieht wirklich gut aus. Aber wie bekomme ich jetzt einen Abstand zwischen die Bilder und bei max-width 768px soll es wie ab dem 5. Bild in Spalten, statt in einer Zeile dargestelt werden. flexdirection column bei @media mit max-width 768px?

  • ich habe jetzt:



    aber bei 768px, also wenn flex-direction column ist, sind die bilder wieder in voller größe, greift dann das js nicht?