Семанти c UI карты группы в React - PullRequest
Новая
       23

Семанти c UI карты группы в React

0 голосов
/ 22 апреля 2020

Я веб-разработчик и мне нужна ваша помощь, пожалуйста! В интерфейсе моего проекта MERN я использую группы карт semanti c UI для визуализации данных из MongoDB. Прямо сейчас у меня есть некоторое пространство вокруг изображения. снимок экрана но я бы хотел, чтобы изображение реагировало на экран разных размеров, занимало всю ширину карты и сохраняло соотношение сторон. снимок экрана .

Вот мой код: 

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

1 Ответ

0 голосов
/ 22 апреля 2020

Я полагаю, вам просто нужно заменить : 

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

Вы можете найти множество других примеров с эквивалентной HTML разметкой, включая песочницы в официальных документах .

...