Semantic UI cards group in React

Question

I am web developer and I need your help please. In frontend of my MERN project I use semantic UI card groups to render data from MongoDB. Right now I have some space all around the image. 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 .

Here is my code:

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

And my CSS code:

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

Answer 1

I guess you just need to replace :

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

With:

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

Though, I would encourage you to do it with React Component way, would be something like:

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

Here is a sandbox example.

You can find many others examples with the equivalent HTML markup including sandboxs in the official docs .