So stellen Sie die next/image-Komponente auf 100 % Höhe ein
Lesezeit: 4 Minuten
Jake
Ich habe eine Next.js-App und benötige ein Bild, das die gesamte Höhe des Containers ausfüllt, während die Breite automatisch anhand des Seitenverhältnisses bestimmt wird.
Ich habe folgendes versucht:
<Image
src="/deco.svg"
alt=""
layout="fill"
/>
Dieses Snippet wird erfolgreich kompiliert, aber im Frontend sehe ich den folgenden Fehler:
Fehler: Bild mit src „/deco.svg“ muss die Eigenschaften „width“ und „height“ oder die Eigenschaft „unsized“ verwenden.
Das verwirrt mich denn gem die Dokumentediese Eigenschaften sind nicht bei der Nutzung erforderlich layout="fill".
Ich glaube nicht, dass dies möglich ist, ohne die Img-Position relativ zu manipulieren oder die Polsterung des Containers von oben nach links zu bearbeiten.
Ja, das übergeordnete Element von Image muss vorhanden sein relative Eigenschaften.
– Assad S
29. September 2021 um 15:04 Uhr
Sie legen die absoluten Werte für Höhe und Breite fest, aber die Frage gibt in Prozent an
– Hussam Khatib
28. November 2021 um 10:43 Uhr
Ich möchte dieser Antwort nur etwas hinzufügen. In meinem Fall, in dem ich das Bild links ausrichten musste, können Sie das Attribut objectPosition=”left” hinzufügen; Es wird an css object-position übergeben: “left”; Mehr Info – developer.mozilla.org/en-US/docs/Web/CSS/object-position
– Piltsen
10. Mai um 15:40 Uhr
Dies ist die perfekte Lösung. Für diejenigen, die dies auf einer Karte mit Textinhalt versuchen, trennen Sie den Container des Bildes vom Textcontainer und fügen Sie hinzu position: relative nur in den Bildcontainer, damit es nicht beide Inhalte überlappt.
– Viktor Eke
7. September um 0:25
Kasse nächstes/Zukunft/Bild‘s fill Layoutmodus, der bewirkt, dass das Bild das übergeordnete Element ausfüllt.
Das ist eine der besten Lösungen, die ich für entfernte Bilder gefunden habe. Für lokale Bilder ist es viel einfacher, aber für dynamisch geladene Bilder funktioniert diese Lösung wie ein Zauber.
– GRosay
3. Oktober 2021 um 9:22 Uhr
Keine der Lösungen, die ich hier gefunden habe, funktioniert für mich.
– Hugo
9. September um 13:29 Uhr
Es ist keine relative Position auf dem Bildelement erforderlich, also können Sie das entfernen!
– Ali Radmanesh
18. September um 7:23 Uhr
Ich denke, stellen Sie auch das Objekt-Fit-Attribut für das Image-Element wie folgt bereit: –
Falls Sie keine absoluten Werte für Höhe und Breite verwenden möchten, also in px usw., können Sie so etwas tun
<div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
<Image
alt="Image Alt"
src="/image.jpg"
layout="fill"
objectFit="contain" // Scale your image down to fit into the container
/>
</div>
Ich glaube nicht, dass dies möglich ist, ohne die Img-Position relativ zu manipulieren oder die Polsterung des Containers von oben nach links zu bearbeiten.
– Piet van Leeuwen
7. August um 23:18 Uhr