Make cards and images the same size - how can I do it with CSS?

Question

I'm using react. Material-ui is for Cards. For Grid I'm using CSS Grid Layout. So far it looks like this:

But my goal is something like this:

And I have 2 problems:

1. I want to have all these cards the same height (415px). I tried height: 415px on .BeerListingScroll-info-box but it doesn't work.

2. Images of bottles and kegs are diffrent in size [keg (80px x 160px) vs. bottle (80px x 317px)]. Is there any way to make them more similar in rendered size?

-

Code:

BeerListingScroll

import React, { Component } from 'react';
import ReduxLazyScroll from 'redux-lazy-scroll';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchBeers } from '../../actions/';

import BeersListItem from '../../components/BeersListItem';
import ProgressIndicator from '../../components/ProgressIndicator';

import './style.css';

class BeerListingScroll extends Component {
  constructor(props) {
    super(props);

    this.loadBeers = this.loadBeers.bind(this);
  }

  loadBeers() {
    const { skip, limit } = this.props.beers;
    this.props.fetchBeers(skip, limit);
  }

  render() {
    const { beersArray, isFetching, errorMessage, hasMore } = this.props.beers;
    return (
      <div className="container beers-lazy-scroll">
        <ReduxLazyScroll
          isFetching={isFetching}
          errorMessage={errorMessage}
          loadMore={this.loadBeers}
          hasMore={hasMore}
        >
          <div className="BeerListingScroll-wrapper">
            {beersArray.map(beer => (
              <div key={beer.id} className="BeerListingScroll-info-box">
                <BeersListItem beer={beer} />
              </div>
            ))}
          </div>
        </ReduxLazyScroll>
        <div className="row beers-lazy-scroll__messages">
          {isFetching && (
            <div className="alert alert-info">
              <ProgressIndicator />
            </div>
          )}

          {!hasMore &&
            !errorMessage && (
              <div className="alert alert-success">
                All the beers has been loaded successfully.
              </div>
            )}
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    beers: state.beers,
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchBeers }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(BeerListingScroll);

BeerListingScroll css

.BeerListingScroll-wrapper {
  display: grid;
  margin: 0;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr) ) ;
  background-color: #f7f7f7;
}

.BeerListingScroll-info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  width: 320px;
}


/* This applies from 600px onwards */
@media (min-width: 1820px) {
  .BeerListingScroll-wrapper {
    margin: 0 400px;
  }
}

@media (min-width: 1620px) {
  .BeerListingScroll-wrapper {
    margin: 0 300px;
  }
}

@media (min-width: 1366px) {
  .BeerListingScroll-wrapper {
    margin: 0 200px;
  }
}

BeerListItem is the child of BeerListingScroll

import React from 'react';
import Card, { CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';

function BeerListItem(props) {
  return (
    <div>
      <Card raised>
        <CardContent>
          <img src={props.beer.image_url} alt="beer" width="30%" />
          <Typography variant="headline" component="h2">
            {props.beer.name}
          </Typography>
          <Typography component="p">{props.beer.tagline}</Typography>
        </CardContent>
      </Card>
    </div>
  );
}

export default BeerListItem;

Full project on github -> Github

Answer 1

So for image sizes here I got great answer.

And I added:

.BeerListItem-img {
  height: auto;
  max-height: 250px;
  width: auto;
  max-width: 250px;
}

And for card size I just added inside BeerListItem class to Card like so (.BeerListItem-main-card):

function BeerListItem(props) {
  return (
    <div>
      <Card raised className="BeerListItem-main-card">
        <CardContent>
          <img
            src={props.beer.image_url}
            alt="beer"
            className="BeerListItem-img"
          />
          <Typography variant="headline" component="h2">
            {props.beer.name}
          </Typography>
          <Typography component="p">{props.beer.tagline}</Typography>
        </CardContent>
      </Card>
    </div>
  );
}

And here is corresponding css to that component.

.BeerListItem-main-card {
  width: 320px;
  height: 415px;
}

.BeerListItem-img {
  height: auto;
  max-height: 250px;
  width: auto;
  max-width: 250px;
}

With that two changes, I've managed to achieve my goal.