2017-01-09 8 views
0

Ich möchte, dass ein Bild auf einer bestimmten Höhe bleibt, aber ich möchte auch, dass es auf der Breite des Benutzerbildschirms bleibt.Stellen Sie eine feste Höhe ohne Breitenänderung ein

Hier ist die CSS-Jährige Bild:

#cafe { 
    max-width: 100%; 
    height: 700px; 
} 

Hier ist der Ausgang: enter image description here

+0

Was ist das Problem? – Banzay

+0

Wenn Sie eine feste Höhe haben und das Bild die Breite des Browsers haben soll, wird das Seitenverhältnis des Bilds verzerrt, es sei denn, diese feste Höhe und die Browserbreite entsprechen dem Seitenverhältnis - was ziemlich unwahrscheinlich ist. Wäre das für dich in Ordnung? Scheint so, als würdest du etwas vermeiden wollen. –

+2

Sie haben zwei Optionen mit einer festgelegten Höhe; ** 1) ** erlaubt das Bild horizontal zu strecken, wenn die volle Breite des Bildes sichtbar sein muss, ** 2) ** erlauben Teile des Bildes zu verdecken, wenn das Bild nicht gedehnt werden soll horizontal. [Einige Beispiele] (https://jsfiddle.net/gzwoer80/) mit 'background-size'. – hungerstar

Antwort

0

Sie dieses

#cafe { 
    width: 100%; 
    height: 100vh; 
} 

hier die 'vh' versuchen können, bedeutet ANSICHTSFENSTER Höhe, die automatisch die Benutzer nimmt Bildschirmhöhe.

+0

Das funktioniert, aber jetzt möchte ich irgendwie die Höhe kleiner sein und wenn ich den vh zu etwas wie 65 ändere, sieht das Bild gestreckt aus. –

+0

@ JordanBaron mit einer festgelegten Höhe und einer variablen Breite wird das Bild immer strecken. Das heißt, es sei denn, Sie möchten Teile des Bilds ausblenden, damit das Seitenverhältnis des Bilds beibehalten werden kann. – hungerstar

+0

Ja, ich bin bereit, das zu tun, aber wie? –

Verwandte Themen