Bootstrap Карусель смешанных изображений и фреймов - не одного размера - PullRequest
Новая
       63

Bootstrap Карусель смешанных изображений и фреймов - не одного размера

1 голос
/ 06 апреля 2020

У меня есть карусель из bootstrap 4.4, и у меня есть 2 изображения jpg, которые все отлично работают, но мое 3-е «изображение» (3D-изображение) должно быть iframe, который ссылается на веб-сайт, где есть изображение 360.

Я хочу, чтобы этот iframe имел ту же высоту, что и мои предыдущие 2 изображения карусели, а также был отзывчивым. Как я могу этого достичь? Мой текущий код выглядит так: 

<!-- Header Carousel -->
<header class="container-fluid">
  <div class="row">
    <div class="col-12 nomargin">
      <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="img/pictures/_MG_9515_web.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="img/pictures/_MG_9629_web.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">

            <iframe class="embed-responsive" src="https://www.kijkrond.in/stationroeselare/" alt="...">
                        </iframe>
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div>
</header>

Ответы [ 2 ]

1 голос
/ 06 апреля 2020

Используйте медиа-запросы для добавления фиксированных размеров к изображениям. Я не советую использовать bootstrap классы здесь, потому что для создания адаптивных изображений, потому что он будет создавать адаптивные изображения, но с динамическими c размерами, и поэтому каждое изображение будет иметь свой собственный размер, поэтому оно будет изменять свой размер в соответствии со своим собственным размером. Даже если они будут использовать тот же класс. Поэтому создайте класс с размерами, которые вы хотите использовать, и создайте медиа-запросы, чтобы сделать его отзывчивым. Таким образом, я использую случайные размеры c. 

.responsive-size {
  height: 500px;
  width: 700px;
  min-width: 100px;
  min-height: 100px;
}
@media (max-width:1000px) {
  .responsive-size {
    height: 300px;
    width: 500px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:800px) {
  .responsive-size {
    height: 200px;
    width: 400px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:700px) {
  .responsive-size {
    height: 150px;
    width: 350px;
    min-width: 100px;
    min-height: 100px;
  }
}
@media (max-width:500px) {
  .responsive-size {
    height: 100px;
    width: 250px;
  }
}
@media (max-width:300px) {
  .responsive-size {
    height: 50px;
    width: 100px;
  }
}

после создания класса, добавьте этот класс ко всем изображениям и фреймам, которые вы используете, как это: 

<div class="carousel-inner container">
                <div class="carousel-item active">
                <img src="https://wallpapercave.com/wp/wp3654088.jpg" class="d-block responsive-size img-fluid" alt="..."/>
                </div>
                <div class="carousel-item">
                <img src="https://wallpapercave.com/wp/wp3654088.jpg" class="d-block responsive-size img-fluid" alt="..."/>
                </div>
                <div class="carousel-item">

                    <iframe class="embed-responsive d-block responsive-size img-fluid" src="https://www.kijkrond.in/stationroeselare/" alt="..." />
                    </iframe>
                </div>
            </div>

Обратите внимание, что я удалил класс w-100, так как он испортит размеры.

0 голосов
/ 06 апреля 2020

Я продолжал искать в Google для ответа, и я придумал что-то легкое. Благодаря объяснению на этом блоге: https://blog.theodo.com/2018/01/responsive-iframes-css-trick/.

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

Я сделал div, где я вставил png. Я дал div самодельный CSS класс posRelative, который имеет overlow: hidden; и позиция: относительная;

Затем я сделал iframe в том же div, который имеет posRelative. Дали iframe самодельный css класс posAbsolute, который имеет: position: absolute; верх: 0; слева: 0; ширина: 100%; высота: 100%; border: 0;

Так что мой iframe находится над png и масштабируется вместе с ним ...

Это работает как шарм: -).

Еще много спасибо за решения, приведенные выше. 

.posRelative{
    position: relative;
    overflow: hidden;
}

.posAbsolute{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
<header class="container-fluid">
          <div class="row">
          <div class="col-12 nomargin">
            <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                    <img src="img/pictures/_MG_9515_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                    <img src="img/pictures/_MG_9629_web.jpg" class="d-block w-100" alt="...">
                    </div>
                    <div class="carousel-item">
                        <div class="posRelative">
                            <img src="img/pictures/Empty_web.png" class="d-block w-100" alt="...">
                        <iframe class="posAbsolute" src="https://www.kijkrond.in/stationroeselare/" alt="..." >
                        </iframe>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
          </div>
        </div>
      </header>
...