React 中的语义 UI 卡片组

Question

我是网络开发人员，需要您的帮助！在我的 MERN 项目前端，我使用语义 UI 卡片组来呈现来自 MongoDB 的数据。现在我在图像周围有一些 space。 screenshot but I would like the image to be responsive for different screen sizes and takes full width of the card and keeping aspect ratio. screenshot.

这是我的代码：

import React, { Component } from "react";
import axios from "axios";

export default class AdsList extends Component {
  constructor(props) {
    super(props);
    this.state = { ads: [] };
  }

  componentDidMount() {
    let getTodosUrl = "http://localhost:4000/ads/";
    axios
      .get(getTodosUrl)
      .then(response => {
        this.setState({ ads: response.data });
        console.log({ ads: response.data });
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  renderItems = () => {
    return (
      <div className="container ui three doubling stackable cards">
        {this.state.ads.map(card => (
          <div className="ui fluid card " key={card._id}>
            <div className="content">
              <img className="ui medium image" src={card.image} alt="" />
            </div>
            <div className="flex-row">
              <div className="header">
                <h3>{card.title}</h3>
              </div>
              <div className="meta">
                <i className="dollar sign icon" />
                {card.price}
              </div>
            </div>
          </div>
        ))}
      </div>
    );
  };
  render() {
    return <div className="grid row">{this.renderItems()}</div>;
  }
}

还有我的 CSS 代码：

.ui.medium.image {
    height: 200px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Answer 1

我猜你只需要替换:

<div className="content">
  <img className="ui medium image" src={card.image} alt="" />
</div>

搭配：

<div className="image">
  <img src={card.image} alt="" />
</div>

尽管如此，我还是鼓励您使用 React Component 的方式来完成，就像这样：

  renderItems = () => {
    return (
      <Card.Group itemsPerRow={3} stackable={true} doubling={true}>
        {this.state.ads.map(card => (
          <Card key={card._id} className="fluid">
            <Image size="medium" src={card.image} wrapped ui={false} />
            <Card.Content>
              <Card.Header>{card.title}</Card.Header>
            </Card.Content>
            <Card.Content extra>
              <Icon name="dollar" />
              {card.price}
            </Card.Content>
          </Card>
        ))}
      </Card.Group>
    );
  };
  render() {
    return <Container>{this.renderItems()}</Container>;
  }

这是一个 sandbox 示例。

你可以找到很多其他的 examples with the equivalent HTML markup including sandboxs in the official docs。

React 中的语义 UI 卡片组

Semantic UI cards group in React

reactjs

semantic-ui