如何使用 ReactJS 将图像正确地放入 HTML 和 CSS 中的 div

Question

我即将完成一个小型的血管图像数据库。正如您从下面的屏幕截图中看到的，我遇到的问题 是尽管我将 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);
}

到目前为止我做了什么：

我一直在努力研究并找出发生这种情况的原因，但无法理解我做错了什么。我咨询了this source，好像很清楚。我申请了，我得到的结果就是我发布的图片上的结果。
我也尝试在 css 上添加 height 属性但这并没有改变问题

.img-容器 img { 宽度：100%；高度：100%；显示：块；过渡：var（--mainTransition）； }
在某个时候我怀疑这是 visibility 的问题，但这也没有改变我遇到的问题。而且我认为这不是可见性的问题属性.

在我看来，有一个（可能？）属性可以被覆盖？或者这不是问题所在。感谢您指出解决此问题的正确方向。

Answer 1

尝试使用 flexbox 和样式化组件来实现您想要的设计。

示例：

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

沙盒演示：https://codesandbox.io/s/stack-63731876-boats-e7onm

这里有一个方便的 CSS flexbox 技巧指南供参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如何使用 ReactJS 将图像正确地放入 HTML 和 CSS 中的 div

How to properly fit an image into a div in HTML and CSS using ReactJS

html

css

reactjs

card