Как установить карточки одинаковой высоты и ширины с изображениями разного размера? - PullRequest
Новая
       281

Как установить карточки одинаковой высоты и ширины с изображениями разного размера?

0 голосов
/ 18 апреля 2019

enter image description here

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

Я попытался поэкспериментировать со стилями и реквизитом "size" с компонентом Image, который берет Card, и создал свой собственный компонент StoreItemImage, который использует "обернутую" реквизит в изображении, чтобы обернуть изображение в 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>

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

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

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

0 голосов
/ 18 апреля 2019

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

...