CODEWITHSUNDEEP
reactjssemantic-uisemantic-ui-react
Adam G
Adam G

Reputation: 9

How to set cards the same height and width with different sized Images?

enter image description here

Doing some mockups as practice to learn Semantic-ui and am making a faux e-commerce store. I'm using Card components to make the store items. I'd like to make all the Cards and the images in the cards the same default height and width and not be defined by the largest image.

I have tried messing with the styles and the "size" prop with the Image component that Card takes, and have created my own StoreItemImage component that uses the "wrapped" prop in image to wrap the image in a div and toyed with the css on that too, but i cant quite seem to get it. I know it's probably pretty simple, but for some reason my brain is just not seeing it.

<Grid.Row
      style={{
        backgroundColor: "salmon"
      }}
    >
      <Grid.Row>
        <Grid stretched padded columns="3">
          <Grid.Row align="center">
            <Grid.Column>
              <Card>
                <StoreItemImage img="https://images-na.ssl-images-amazon.com/images/I/61C4v%2Bk1p7L._UX679_.jpg" />
                <Card.Content>
                  <Card.Header>Hat</Card.Header>
                  <Card.Meta>$15</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="http://images.clipartpanda.com/aviator-sunglasses-png-RB3025-16.png" />
                <Card.Content>
                  <Card.Header>Sunglasses</Card.Header>
                  <Card.Meta>$35</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="http://pngimg.com/uploads/watches/watches_PNG9877.png" />
                <Card.Content>
                  <Card.Header>Watch</Card.Header>
                  <Card.Meta>$40</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Grid.Row>

      <Grid.Row>
        <Grid padded columns="3">
          <Grid.Row>
            <Grid.Column>
              <Card>
                <StoreItemImage img="https://cdn.pixabay.com/photo/2017/01/13/04/56/blank-1976334_960_720.png" />
                <Card.Content>
                  <Card.Header>Shirt</Card.Header>
                  <Card.Meta>$20</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="https://cdn.pixabay.com/photo/2017/01/13/04/56/blank-1976334_960_720.png" />
                <Card.Content>
                  <Card.Header>Shirt</Card.Header>
                  <Card.Meta>$20</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="https://cdn.pixabay.com/photo/2017/01/13/04/56/blank-1976334_960_720.png" />
                <Card.Content>
                  <Card.Header>Shirt</Card.Header>
                  <Card.Meta>$20</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Grid.Row>

      <Grid.Row>
        <Grid padded columns="3">
          <Grid.Row>
            <Grid.Column>
              <Card>
                <StoreItemImage img="http://images.skipantsi.com/l-m/water-repellent-windproof-softshell-fleece-MRxTtX1npHW4Zg.jpg" />
                <Card.Content>
                  <Card.Header>Pants</Card.Header>
                  <Card.Meta>$20</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="http://images.skipantsi.com/l-m/water-repellent-windproof-softshell-fleece-MRxTtX1npHW4Zg.jpg" />
                <Card.Content>
                  <Card.Header>Pants</Card.Header>
                  <Card.Meta>Pants</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>

            <Grid.Column>
              <Card>
                <StoreItemImage img="http://images.skipantsi.com/l-m/water-repellent-windproof-softshell-fleece-MRxTtX1npHW4Zg.jpg" />
                <Card.Content>
                  <Card.Header>Pants</Card.Header>
                  <Card.Meta>$20</Card.Meta>
                </Card.Content>
              </Card>
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Grid.Row>
    </Grid.Row>

I can either get the Cards the same height but the images get wonky. I Also want all Cards the same height and to not be defined by the largest image.

Upvotes: 0

Views: 4912

Answers (2)

pramod singh
pramod singh

Reputation: 511

Don't use <Image /> of that semantic UI but use JSX <img src={image} height={300}/> instead which will be the fix.

Upvotes: 2

Dblaze47
Dblaze47

Reputation: 868

Apply a fixed height to the image container, and then set the background-size: containstyle to ensure the image will retain the container div's height and also maintain aspect ratio. One other option is to crop images to fit the containing div with fixed dimensions.

Upvotes: 0

Related Questions