Frage von mastagamer, 43

HTML Bilder mitskalieren?

Undzwar möchte ich eine Webseite für meine Bilder erstellen. Dafür nutze ich diese Grid Datei http://www.responsivegridsystem.com/. Mein Problem ist auf dem Bild zu sehen denke ich.

CSS
.content img{
max-width: 100%;
max-height: 200px;
}

.content h1{
padding: 10px;
color: aliceblue;
text-align: center;
background: rgba(0, 0, 0, .50);
}

HTML
<div class="content">
        <div class="row">
            <div class="col span-port">
                <div class="wrap">
                <img src="https://scontent-fra3-1.xx.fbcdn.net/v/t1.0-0/q82/s480x480/14947782_195140984270126_8855804254038266311_n.jpg?oh=b489ea2c40b8d5f0fc80f39839fe7e9d&oe=58CADEE0">
                </div>
            </div>

            <div class="col span-port">
                <div class="wrap">
                <img src="https://scontent-fra3-1.xx.fbcdn.net/v/t1.0-0/s526x395/14908405_1118112124940808_5801185039555827004_n.jpg?oh=54610f9eff8a0de20eadf27b1f99c040&oe=58D24E21">
                </div>
            </div>

            <div class="col span-port">
                <div class="wrap">
                <img src="https://scontent-fra3-1.xx.fbcdn.net/v/t1.0-9/14925323_195142387603319_9186925518609310852_n.jpg?oh=b67b6ca4a73786a2e378cfe8015a69e1&oe=58CB20FD">
                </div>
            </div>

            <div class="col span-port">
                <div class="wrap">
                <img src="https://scontent-fra3-1.xx.fbcdn.net/v/t1.0-9/14907190_1118113128274041_3261170722161466281_n.jpg?oh=977498c131df05b2ac5f8561416ed541&oe=588B147D">
                </div>
            </div>
        </div>
    </div>
Antwort
von PeterKremsner, 23

im CSS eine Regel für die img Taggs erstellen:

img{
   width:100%;
}

Diese Anweisung sorgt dafür dass das Bild immer die Breite des Containers hat, die Höhe wird nach dem Bildformat bestimmt.

Kommentar von mastagamer ,

http://prntscr.com/d5i8fw
Ändert sich nichts bzw macht es nur schlimmer

Kommentar von PeterKremsner ,

Haben deine Rows bzw das Wrap eine fixe Höhe?

Mach den Ramen um das Wrap div und nicht um das Bild selbst und dann musst du schauen, dass deine Bilder ein Format haben, dass sie in dieses Element rein passen.

Ich kenne leider dieses Framework nicht von da her weis ich nicht welche Regeln die für die einzelnen Elemente verwenden.

Kommentar von mastagamer ,

Nichts hat eine fixe höhe. nur eine feste breite.
hab versucht in der grid css datei dem span-port element eine feste höhe zu geben nur interessiert es das relativ wenig

das wrap ist einfach nur dazu da das das etwas ordentlicher aussieht

Kommentar von PeterKremsner ,

Irgendein Container müsste nach dem Verhalten aber overflow: hidden und eine zumindest feste maximale Höhe haben, ansonsten würden die Bilder immer in ganzer größer angezeigt werden.

Wenn es dir beim Wrap einfach nur um den Rahmen geht, kannst du den dir auch leicht selbst machen.

Lass zum Test mal das Wrap weg und schau ob die Bilder dann in der ganzen Größe angezeigt werden.

Kommentar von mastagamer ,

hab versucht den bildern eine in px zu geben aber sobald sich die breite ändert ist das logischer weise unsinnig

http://prntscr.com/d5idu4
das passiert wenn ich den bildern ihre feste höhe weg nehme.
Ich hätte aber gerne das die beiden in der mitte sich so anpassen das sie so hoch sind wie die bilder im querformat

Kommentar von PeterKremsner ,

Was heist eine px zu geben, px ist nur eine Einheit aber keine Eigenschaft?

Kommentar von mastagamer ,

*eine feste höhe in px

Kommentar von PeterKremsner ,

Ok dann Formatier dir den Ramen und Schatten selbst und setzt die Bildhöhe auf zB 10vh oder gib ihnen eine fixe Höhe in Pixel.

Das Problem mit dem Schatten ist, dass die Breites des Wrap Containers von der Klasse span-port angegeben wird, die Breite des Bildes aber runterskalliert werden muss weil für die Feste Höhe das Seitenverhältnis eingehalten werden muss.

Kommentar von mastagamer ,

http://prntscr.com/d5ihis
im fullscreen modus ist alles perfekt wenn ich aber die größe des fensters ändere ist eine feste höhe in px unsinn.

 mit der vh version entsteht das selbe problem
http://prntscr.com/d5iizn

wenn ich dem wrap container bzw div eine feste höhe und breite zuteile passiert das
http://prntscr.com/d5ijsm

Kommentar von PeterKremsner ,

Nein ich glaube der Wrap Container verhält sich hier nicht richtig, du musst selbst so einen Container machen, mit Ramen und Dropshadow etc, dem gibst du dann ein padding und ein margin.

Btw px ist für andere Geräte kein Blödsinn und du kannst das nicht einfach damit vergleichen wenn du die Fenstergröße änderst, weil du ja die Bildschirmauflösung trotz kleinerem Fenster ja gleich bleibt, aber die Zuordnung hier passt nicht ganz.

Das Hauptproblem bei deiner Seite ist aber dass die Bilder nicht alle das selbe Format haben sondern einmal Hochformat und dann Querformat dass ist in CSS leider schlecht verwertbar.

Du brauchst eben einen Container der sich an die Imagegröße anpasst und nicht an das durch das CSS Framework vorgegebene Grid.

Kommentar von PeterKremsner ,

Du kannst zB mal von dem Ausgehen und dich dann an dein Endergebnis herantasten:

http://zurb.com/playground/css3-polaroids

Zusätzlich nimm das ganze Zeugs mit dem Grid vorerst weg, das verzieht das Layout.

Mit Float: left ordnet der Browser die Bilder sowieso so an dass sie alle sichtbar sind, je nach Fenstergröße.

Antwort
von kuechentiger, 2
.content img {
width:auto;
height:100%
}

.span-port, .wrap { float:left; height:200px!important }

Das funktioniert so.
Das float:left steht da, weil bei meinem Test die Bilder sonst untereinander standen. Wird bei dir ja nicht nötig sein.

Antwort
von RakonDark, 14

sorry aber ich sehe da kein problem .

https://jsfiddle.net/gjxosx6w/

selbst wenn ich height:200px angebe sehen die bilder genauso aus .

wo ist den da was verzerrt .

Kommentar von mastagamer ,

http://prntscr.com/d5ifcc

So sollte es im idealfall aussehen und zwar in jeder breite

http://www.chasejarvis.com/photos/

Kommentar von RakonDark ,

die sind aber im querformat , du hast aber hochformat

ginge dann nur  mit overflow:hidden , aber dann siehste bei hochformat halt nicht alles vom bild.

Kommentar von RakonDark ,

und dann verschiebt sich darunter eh wieder alles .

Keine passende Antwort gefunden?

Fragen Sie die Community