wake-up-neo.com

Wie wird die Bildgröße automatisch angepasst, wenn die Breite des Browsers geändert wird, aber dieselbe Höhe beibehalten

Ich versuche, den gleichen Effekt wie diese Website zu replizieren: http://www.knockknockfactory.com/

Wenn die Breite des Browsers geändert wird, wird das Bild automatisch kleiner, die Höhe des Bereichs, in dem es sich befindet, bleibt jedoch gleich.

Wenn ich versuche, dies zu replizieren, wird mein Bild auch kleiner, aber die Höhe ändert sich?

Mein Code ist bisher:

 <div id="image"><img src="cover.png" /></div>

CSS:

body {
    margin: 0;
    padding: 0;
}

img { 
    max-width: 100%; 
    height: auto; 
}

Wie kann ich mein Bild verkleinern/vergrößern, wenn ich die Größe des Browsers ändert, aber mit CSS die gleiche Höhe wie auf dieser Website beibehalten? 

htmlcssimageresize
9
Ned

Ich habe Perfect Full Page Background Image verwendet, um dies auf einer vorherigen Site zu erreichen.

Sie können background-size verwenden: cover;, wenn Sie nur moderne Browser unterstützen müssen.

4
Jeremy Gallant

Es ist eine alte Frage, aber ich möchte das hinzufügen, wenn Sie das Bild entsprechend der Größe des Ansichtsfensters nur mit css ändern möchten. Sie können Viewport-Einheiten "vh (Viewport-Höhe)" oder "vw (Viewport-Breite)" verwenden.

.img {
width: 100vw;
height: 100vh;
}

Siehe Browser-Unterstützung

2
eren130

Da Sie Probleme beim Einstellen der Höhe haben, können Sie dies möglicherweise verwenden. http://jsfiddle.net/uf9bx/1/

img{
width: 100%;
height: 100%;
max-height: 300px;
}

Ich bin mir nicht sicher, in welcher Größe oder an welchem ​​Ort Sie Ihre Bilder platzieren, aber vielleicht hilft das!

2
Matt

Machen Sie ein Hintergrundbild und größer als 100%, um den gewünschten Effekt zu erzielen: http://jsfiddle.net/derekstory/hVM9v/

HTML

<div id="image"></div>

CSS

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#image {
    width: 100%;
    height: 500px;
    background: #000 url('http://static.ddmcdn.com/gif/dog-9.jpg') center no-repeat;
    background-size: auto 200%;
}
1
Derek Story

Die von Ihnen verlinkte Website ändert nicht die Bildbreite, sondern schneidet sie tatsächlich ab. Dafür muss es als Hintergrundbild eingestellt werden.

Weitere Informationen zu background-image finden Sie unter http://www.w3schools.com/cssref/pr_background-image.asp

Verwendungszweck:

#divID {
    background-image:url(image_url);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
0
Mohammad Areeb Siddiqui

wenn Sie die Breite des Bildes ändern, wird die Höhe automatisch geändert ...

wie viele Bilder möchten Sie mit dieser Funktion haben? Wenn es viel ist und sie alle unterschiedliche Höhen haben, sollten Sie wahrscheinlich auch die Höhe ändern lassen.

Nehmen wir an, Sie haben 5 Bilder, die eine Höhe von 400px haben

.fixed { width: 100%; height: 500px !important }

Dadurch sollte sich die Breite ändern, die Höhe jedoch gleich bleiben.

0
bob

Sie sollten etwas über die Medienabfragen für CSS lernen. Die Site, auf die Sie sich beziehen, verwendet dieselbe. Grundsätzlich verwendet die Site jedes Mal das andere CSS, wenn sich die Browserfenstergröße ändert. Hier ist der Link für Beispiele 

http://css-tricks.com/css-media-queries/

0
vendettamit