сделать изображение в карточке заполнить пространство - PullRequest
Новая
       21

сделать изображение в карточке заполнить пространство

0 голосов
/ 31 мая 2019

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

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

<Row ClassName="posts">
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
</Row>

Я хочу, чтобы полученное изображение содержалось на карте, центрировалось и заливалось как фоновое изображение.

Ответы [ 2 ]

0 голосов
/ 31 мая 2019

Возможно, вы добавите Bootstrap из NPMJS в ваш проект.Затем вы можете использовать основные стили в документации.

Все, что вам нужно сделать, это добавить className="img-fluid" к вашим img 

<Row ClassName="posts">
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
  <Col>
    <Card style={{ height:"460px", width:"460px"}}>
      <a href="#"><img className="img-fluid" src={media_picture} width="auto" height="100%"/></a>
    </Card>
  </Col>
</Row>
0 голосов
/ 31 мая 2019

Во-первых, убедитесь, что нет никаких отступов 

padding:0

тогда абсолютная позиция 

height:'100%'
marginLeft:auto
marginRight:auto
display:'block'
...