Блог

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

 function Work() {

  return (
    <Carousel fade indicators={false} controls={false} pause={false}>
      <Carousel.Item interval={5000}>
        <img
          className="d-block w-100"
          src={newsBlur}
          alt="News Flash blurred"
        />
        <Carousel.Caption style={styles.carouselCaption}>
          <h3>
            News Flash gathers news based on the user's
            news category preferences.
          </h3>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}
 

Оказывается, мои изображения на самом деле отображались во весь экран, что является настройкой по умолчанию для карусели react-bootstrap. Мои изображения были на прозрачном фоне, из-за чего казалось, что они покрывают только часть экрана. Когда я изменил размер изображения, компонент просто растянул его, чтобы заполнить весь экран, так что, казалось, он ничего не делал. Мне нужно было воссоздать свои изображения с другим соотношением прозрачной задней поверхности и видимого изображения.