So stellen Sie die next/image-Komponente auf 100 % Höhe ein

Lesezeit: 4 Minuten

Jakes Benutzeravatar
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.

    – Piet van Leeuwen

    7. August um 23:18 Uhr

Benutzeravatar von Franz
Francis

Das hat bei mir funktioniert.

mit next/image:

<div style={{width: '100%', height: '100%', position: 'relative'}}>
  <Image
    alt="Mountains"
    src="https://stackoverflow.com/mountains.jpg"
    layout="fill"
    objectFit="contain"
  />
</div>

und mit next/future/image:

<Image
    fill
    alt="Mountains"
    src="https://stackoverflow.com/mountains.jpg"
    sizes="100vw"/>

nächstes/Zukunft/Bild

  • 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.

    – Francis

    15. September um 14:18 Uhr

Muhammet Can TONBULs Benutzeravatar
Muhammet Can TONBUL

<img src="/path/to/image.jpg" alt="" title="" />

In NextJS

<Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>

Benutzeravatar von Peyman Baseri
Peyman Baseri

Hier ist ein Weg: Zum Beispiel möchte ich ein Bild haben, das die gesamte Breite und Höhe seines Containers abdeckt, der ein div ist.

<div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

Und hier ist der Stil: (Es gibt ein Container-Div, das die halbe Breite und Höhe des Ansichtsfensters einnimmt und mein Bild wird es abdecken.)

// Nested Styling
.image-container {
    width: 50vw;
    height: 50vh;
    position: relative;

    .image {
        width: 100%;
        height: 100%;
        position: relative !important;
        object-fit: cover; // Optional
    }
}

// Or Normal Styling
.image-container {
    width: 50vw;
    height: 50vh;
    position: relative;
  }
.image-container .image {
    width: 100%;
    height: 100%;
    position: relative !important;
    object-fit: cover; // Optional
}

  • 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: –

<Image
    alt="Mountains"
    src="/mountains.jpg"
    layout="fill"
    objectFit="cover"
  />

Beispiel von Nextjs bereitgestellt werden kann https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js

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>

Originalquelle https://stackoverflow.com/a/66358533/12242764

Benutzeravatar von Knight Rider
Ritter Reiter

<img alt="" src="https://some/image/uri" loading="lazy" />

In NextJS

<div>
  <Image
    alt=""
    src="https://some/image/uri"
    width="100%"
    height="100%"
    layout="fill"
    objectFit="contain"
  />
</div>

Benutzeravatar von Blastfurnace
Hochofen

Es funktioniert für mich in der Bildkomponente next.js

<Image src="/path/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="cover"/>

  • funktioniert bei mir nicht, Attribute width="100%" height="100%" scheinen keine gültigen Werte zu haben

    – Ariel Mirra

    3. September um 18:06 Uhr

1430910cookie-checkSo stellen Sie die next/image-Komponente auf 100 % Höhe ein

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy