ReactJS を使用して HTML および CSS の div に画像を適切に適合させる方法

船舶の画像の小さなデータベースが完成しようとしています。以下のスクリーンショットからわかるように、私が抱えている問題は、CSS クラスを特定の幅に固定しているにもかかわらず、カードのサイズがすべて異なることです。すべてのカードの幅と高さを同じにしようとしています。私の何が間違っているのでしょうか?

この問題に関連するコードのスニペットは次のとおりです。

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>
    );
}

関連する App.css クラス:

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

これまでにやったこと:

なぜそのようなことが起こっているのかを調査して解決しようとしましたが、何が間違っているのか理解できませんでした。私はこのソースを参照しましたが、かなり明確であるようです。私が申請した結果は、投稿した画像にあるものとなります。

高さプロパティも追加しようとしましたcss を試しても問題は変わりませんでした

.img-container img { 幅: 100%; 高さ: 100%; 表示ブロック; 遷移: var(--mainTransition); }

ある時点で、これは可視性の問題ではないかと疑ったのですが、それでも私が抱えている問題は変わりませんでした。そして、それは可視性の問題ではないと思います。

上書きできる (おそらく?) プロパティがあるように思えます。あるいは、それは問題ではないかもしれません。 この問題の解決方法について正しい方向性を示していただきありがとうございます。

希望のデザインに合わせて、フレックスボックスとスタイル付きコンポーネントを使用してみてください。

例:

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>
  );
}

さndbox デモ: https://codesandbox.io/s/stack-63731876-boats-e7onm

フレックスボックスの便利な CSS トリック ガイドを参照してください: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

1

1

ハーレーさん、こんにちは。立ち寄って質問を読んでいただきありがとうございます。いいアイデアですね！ご提案を実行して、しばらくしてからご連絡いたします。ご回答いただきありがとうございます。 :)

9月2020 年 4 月 13:19