Блог

Делаю несколько макетов в качестве практики для изучения Semantic-ui и создаю искусственный магазин электронной коммерции. Я использую компоненты карты для создания элементов магазина. Я бы хотел, чтобы все карточки и изображения в карточках имели одинаковую высоту и ширину по умолчанию и не определялись самым большим изображением.

Я пытался возиться со стилями и реквизитом «размер» с компонентом изображения, который принимает Card, и создал свой собственный компонент StoreItemImage, который использует «завернутый» реквизит в image для переноса изображения в 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+k1p7L._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>

 

Я могу либо сделать Карты одинаковой высоты, но изображения получаются шаткими. Я также хочу, чтобы все карты были одинаковой высоты и не определялись самым большим изображением.

Не используйте <Image /> этот семантический пользовательский интерфейс, а <img src={image} height={300}/> вместо этого используйте JSX, что будет исправлением.

Примените фиксированную высоту к контейнеру изображения, а затем установите background-size: contain стиль, чтобы гарантировать, что изображение сохранит высоту контейнера div, а также сохранит соотношение сторон. Еще один вариант — обрезать изображения, чтобы они соответствовали содержимому div с фиксированными размерами.