Saya akan menyelesaikan database kecil gambar kapal. Seperti yang dapat Anda lihat dari tangkapan layar di bawah, masalah yang saya miliki adalah semua ukuran kartu berbeda meskipun saya memperbaiki kelas css ke lebar tertentu. Saya mencoba untuk memiliki semua kartu dengan lebar dan tinggi yang sama. Apa yang saya lakukan salah?

card-img

Di bawah cuplikan kode yang terkait dengan masalah ini:

vessels.js

export default function Vessel({ vessel }) {
    const { name, slug, images /* size */ } = vessel;

    return (
        <div>
        <article className="room">
            <div className="img-container">
                <img src={images[0] || defaultImg} alt="single" />
                <Link to={`/vessels/${slug}`} className="btn-primary">
                    Features
                </Link>
            </div>
        </article>
        </div>
    );
}

Dan kelas App.css terkait:

.room {
    display: block;
    box-shadow: var(--lightShadow);
    transition: var(--mainTransition);
}    
.img-container {
    position: relative;
}
.img-container img {
    width: 100%;
    display: block;
    transition: var(--mainTransition);
}

Apa yang telah saya lakukan sejauh ini:

  1. Saya telah mencoba untuk meneliti dan mencari tahu masalah mengapa itu terjadi tetapi tidak dapat memahami apa yang saya lakukan salah. Saya berkonsultasi dengan sumber ini yang tampaknya cukup jelas. Saya terapkan dan hasil yang saya miliki adalah yang ada di gambar yang saya posting.

  2. Saya juga mencoba menambahkan properti height di css tetapi itu tidak mengubah masalah

    .img-wadah img { lebar: 100%; tinggi: 100%; tampilan: blok; transisi: var(--mainTransition); }

  3. Pada titik tertentu saya curiga itu adalah masalah visibilitas tetapi itu juga tidak mengubah masalah yang saya miliki. Dan saya pikir itu bukan masalah visibilitas properti.

Sepertinya saya ada properti (mungkin?) yang bisa ditimpa? Atau mungkin bukan itu masalahnya. Terima kasih telah menunjukkan arah yang benar tentang cara mengatasi masalah ini.

0
Emanuele 4 September 2020, 00:27

1 menjawab

Jawaban Terbaik

Coba gunakan flexbox dan komponen gaya untuk desain yang Anda inginkan.

Contoh:

import React from "react";
import styled from "styled-components";
import "./styles.css";

const BoatContainer = styled.div`
  display: flex;
  flex-flow: row wrap;
`;

const BoatImg = styled.img`
  width: 200px;
  margin: 5px;
`;

export default function App() {
  return (
    <div className="App">
      <h1>Behold: boats.</h1>
      <BoatContainer>
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Motorboat_at_Kankaria_lake.JPG/1920px-Motorboat_at_Kankaria_lake.JPG" />
        <BoatImg src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Boats_at_Bhimili_beach_in_Visakhapatnam.jpg/1280px-Boats_at_Bhimili_beach_in_Visakhapatnam.jpg" />
      </BoatContainer>
    </div>
  );
}


Demo kotak pasir: https://codesandbox.io/s/stack-63731876-boats-e7onm

Berikut adalah panduan Trik CSS berguna untuk flexbox untuk referensi: https:// css-tricks.com/snippets/css/a-guide-to-flexbox/

1
Harley Lang 3 September 2020, 22:06