Блог

Главная - Вопросы по программированию - Как сократить разрыв между уменьшенным iframe и следующим элементом?

Как сократить разрыв между уменьшенным iframe и следующим элементом?

#html #css

Вопрос:

введите описание изображения здесь

У меня есть iframe, который я уменьшил до 65%, но, несмотря на то, что он уменьшился, «div» по-прежнему занимает 100% от исходного размера iframe, и в результате между iframe и следующим элементом существует огромный разрыв. Я не знаю, как сократить разрыв. Я хочу, чтобы следующий элемент находился прямо под встроенным iframe. HTML-код:

 @media only screen and (min-width:768px){
  .container-iframe{
    -moz-transform: scale(0.65, 0.65); 
    -webkit-transform: scale(0.65, 0.65); 
    -o-transform: scale(0.65, 0.65);
    -ms-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65); 
    -moz-transform-origin: center;
    -webkit-transform-origin: center;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
  }
  .iframe-responsive{
    bottom: 0;
    float: center;
    height: 100%;
    left: 0;
    position:absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
} 
 <div class="container-iframe">
    <iframe class="iframe-responsive" src="https://www.youtube.com/embed/chw2oMUrh4U"></iframe>
</div>  
<div class="row">
  <div class="col" style="text-align: center;">
    <h1>Something 1</h1> 
  </div>
</div>
<div class="row">
  <div class="col" style="text-align: center;">
    <h1>Something 2</h1>
  </div>
</div>

Комментарии:

1. Есть ли причина для использования масштабирования в отличие от установки ширины 65%?

Ответ №1:

Вы могли бы задать себе .container-iframe заданную высоту. В настоящее время контейнер не имеет высоты, и в iframe нет ничего в качестве ссылки на 100%, которые вы ему дали.

 @media only screen and (min-width:768px){
  .container-iframe{
    -moz-transform: scale(0.65, 0.65); 
    -webkit-transform: scale(0.65, 0.65); 
    -o-transform: scale(0.65, 0.65);
    -ms-transform: scale(0.65, 0.65);
    transform: scale(0.65, 0.65); 
    -moz-transform-origin: center;
    -webkit-transform-origin: centeer;
    -o-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
    height: 150px;
  }
  .iframe-responsive{
    bottom: 0;
    float: center;
    height: 100%;
    left: 0;
    position:absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
} 
 <div class="container-iframe">
    <iframe class="iframe-responsive" src="https://www.youtube.com/embed/chw2oMUrh4U"></iframe>
</div>  
<div class="row">
  <div class="col" style="text-align: center;">
    <h1>Something 1</h1> 
  </div>
</div>
<div class="row">
  <div class="col" style="text-align: center;">
    <h1>Something 2</h1>
  </div>
</div>

Комментарии:

1. Спасибо, что ответили на мой вопрос, но это не сработало, разрыв все тот же. Прежде чем опубликовать этот вопрос, я несколько раз пытался изменить высоту, но безрезультатно. Высота упрямо остается прежней.

2. Знаете ли вы о своем медиа-запросе? Он отображается только в том случае, если ваш экран больше 768px . В маленьком предварительном просмотре есть пробел, но не в большом.

3. мой браузер по-прежнему показывает большой пробел, а мой экран больше 1240 пикселей

Метки: