Ich versuche, den gleichen Effekt wie auf dieser Website zu erzielen: http://www.knockknockfactory.com/
Wenn die Breite des Browsers geändert wird, wird das Bild automatisch kleiner, aber die Höhe des Bereichs, den es einnimmt, bleibt gleich.
Wenn ich versuche, dies zu replizieren, wird mein Bild auch kleiner, aber die Höhe ändert sich?
Mein bisheriger Code lautet:
<div id="image"><img src="cover.png" /></div>
CSS:
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
Wie bringe ich mein Bild dazu, sich bei einer Größenänderung des Browsers zu verkleinern/vergrößern, aber trotzdem die gleiche Höhe zu behalten, indem ich CSS wie auf dieser Website verwende?
Ich habe Perfect Full Page Background Image verwendet, um dies auf einer früheren Website zu erreichen.
Sie können background-size: cover; verwenden, wenn Sie nur moderne Browser unterstützen müssen.
Sie sollten sich mit den Media-Queries für CSS vertraut machen. Die Website, auf die Sie sich beziehen, verwendet dieselben. Die Website ist im Grunde mit den verschiedenen CSS jedes Mal die Browser-Fenstergröße ist changining. Hier's der Link für Beispiele
Die Website, die Sie verlinkt haben, ändert nicht die Breite des Bildes, sondern schneidet es ab. Dazu muss es als Hintergrundbild eingestellt werden.
Für mehr Informationen über Hintergrundbilder
siehe http://www.w3schools.com/cssref/pr_background-image.asp
Verwendung:
#divID {
background-image:url(image_url);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}