Ich habe ein Bild in der Kopfzeile meiner Website. Ich möchte eine CSS-Eigenschaft verwenden, um es über die Breite des Browsers zu strecken, so dass es auf die Anpassung der Browserfenstergröße durch den Benutzer reagiert und die vertikale Achse des Bildes entsprechend skaliert wird. Ist dies tatsächlich möglich?
Antworten
Zu viele Anzeigen?
seanmonstar
Punkte
11086
Percentages behält ein Bild in der gesamten Breite bei und aktualisiert das Bild bei einer Größenänderung im Browser.
Wenn Sie wollen, dass das Bild toujours dehnbar sein, können Sie verwenden:
img {
width:100%;
}Dadurch kann das Bild jedoch leicht wie völliger Mist aussehen. Eine sicherere Methode könnte sein:
img {
max-width:100%;
}In beiden Fällen ändert sich die Größe des Bildes mit der Größenänderung des Browsers. Bei der zweiten Methode wird das Bild jedoch nicht über seine natürliche Größe hinaus gestreckt, sodass es nicht deformiert aussieht.
Thomas Owens
Punkte
110966
David Thomas
Punkte
239063
CSS kann ein Bild durchaus strecken (zumindest habe ich es in Firefox bei der folgenden URL so gemacht): http://www.davidrhysthomas.co.uk/mindez/borked.html ):
img {height: 100%;
width: 100%;
min-height: 600px;
min-width: 800px;
}zum Beispiel.
Aber ... Ich denke, für es zu reagieren, um die Viewport-Größe, die JS wäre wahrscheinlich Ihr besserer Freund sein.
Toby
Punkte
21
Probieren Sie es aus, indem Sie diesen CSS-Stil auf das Element anwenden, das das Bild enthält. In diesem Beispiel befindet sich das Bild auf dem Hintergrund des Seitenkörpers:
body
{
margin: 0;
padding: 0;
width: 100%;
background: url(images/YOUR-IMAGE.JPG) no-repeat left top;
background-size: 100%;
}Dadurch wird Ihr Bild auf dem Element maximiert. Wenn Sie die Größe des Fensters ändern, wird das Bild an die neue Fenstergröße des Browsers angepasst
