2016-05-06 9 views
-1

Also habe ich versucht, ein Bild an die Fenstergröße anzupassen. Gibt es eine Möglichkeit, ein div auf die Fensterbreite zu skalieren, während die richtigen Verhältnisse mit einem Event-Listener beibehalten werden? Ich habe durch das Internet geschaut, aber nichts hat funktioniert. Ich denke, dass es solche Sachen benutzen wird. Bei Größenanpassung auf Fensterbreite erweitern, Höhe = 5/3 Breite. Es wird höchstwahrscheinlich einen EventListener verwenden. Ich habe versucht, Breite 100%, aber das schneidet nur den unteren Rand des Bildes nicht lassen Sie mich nach unten scrollen, um den Rest zu sehen.setzen div zu Fenstergröße mit JavaScript mit HTML-Datei verknüpft

+0

Muss das eigentlich mit dem JavaScript gemacht werden oder reicht das einfach in CSS? – BSMP

+0

Willkommen bei Stack Overflow! Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion in der Frage selbst erforderlich ist **. Obwohl Sie einen [** Link zu einem Beispiel oder einer Site ** angegeben haben] (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work- can-i-just-einfügen-a-link-to-it), sollte die Verknüpfung ungültig werden, würde Ihre Frage keinen Wert für andere zukünftige SO-Benutzer mit dem gleichen Problem haben. –

+0

Mögliche Duplikate von [Responsively ändern div Größe beibehalten Seitenverhältnis] (http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) – BSMP

Antwort

0

Set Bildbreite bis 100%, nicht setzen eine Höhe und das Bild wird Seitenverhältnis beibehalten.

<body> 
    <img src="..." style="width: 100%" /> 
</body> 

Siehe Beispiel: http://codepen.io/jessegavin/pen/QNzeaX

+0

ich habe versucht aber das Problem ist, dass auf diese Weise der untere Teil des Bildes abgeschnitten wird, damit es abwärts scrollen kann. – sharkyevno

+0

Diese Technik kann möglicherweise den unteren Teil des Bildes abschneiden, aber Sie können noch scrollen. – jessegavin

+0

es funktioniert jetzt danke für die Hilfe – sharkyevno

0

diesen Code Versuchen

window.onresize = function(){ 
    div.style.width = window.innerWidth + 'px'; 
    div.style.height = window.innerHeight + 'px'; 
} 
+0

danke ich werde versuchen – sharkyevno

0

CSS ist der Weg Sie gehen sollten. width: 100%; ist eine Sache, die Sie gehen können. Wenn Ihr Darstellungsbereich jedoch skalierbar ist, sollten Sie width: 100vw; verwenden.

Verwandte Themen