Question

做一些模拟练习来学习Semantic-ui，并正在建立一个人造电子商务商店。我正在使用Card组件制作商店商品。我想使所有卡片和卡片中的图像具有相同的默认高度和宽度，而不是由最大的图像定义。

我尝试用Card所使用的Image组件弄乱样式和“ size”道具，并创建了自己的StoreItemImage组件，该组件使用image中的“ wrapped”道具将图像包装在div中并进行了玩弄的CSS也是如此，但我似乎不太明白。我知道这可能很简单，但是由于某种原因，我的大脑却没有看到它。

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

我可以使Cards的高度相同，但是图像变得不稳定。我还希望所有卡片的高度相同，并且不要由最大的图像定义。

Answer 1

对图像容器应用固定的高度，然后设置background-size: contain样式以确保图像将保留容器div的高度并保持宽高比。另一种选择是裁剪图像以适合包含div的固定尺寸。

Answer 2

不要使用该语义UI的<Image />，而应使用JSX <img src={image} height={300}/>。

如何将不同尺寸的图像设置为相同的高度和宽度？

2 个答案: