Блог

Главная - Вопросы по программированию - Не удается избавиться от желоба сетки CSS (и встраивание слишком широкое)

Не удается избавиться от желоба сетки CSS (и встраивание слишком широкое)

#css #grid #vimeo

#css #сетка #vimeo

Вопрос:

У меня есть простая сетка CSS (вложенная в другую сетку) из двух строк, и у меня две проблемы.

  1. Я не могу заставить желоб между строками исчезнуть, за исключением уменьшения нижнего поля содержимого верхней строки на 3 пикселя. Есть идеи для более элегантного решения? Я прокомментировал свое жестокое исправление в следующем CSS. Прямая ссылка: http://nyveen.ca/bb-test /
  2. Какого черта встроенные видеоролики Vimeo выходят за пределы медиа-раздела на один или два пикселя?
 @charset "UTF-8";

body {
  background-color: #89726c;
}


.main-nav {
  grid-area: nav;
}

.main-head {
  grid-area: header;
}

.content {
  grid-area: content;
  background-color: #443937;
}

.main-footer {
  grid-area: footer;
}

.wrapper {
  margin: 5%;
  display: grid;
  gap: 20px;
  grid-template-areas: 
    "nav"
    "header"
    "content"
    "footer";
}

header, footer {
  background-color: #000000;
  color: #89726c;
}

nav, .content, a {
  color: #fffcfd;
}

nav ul {
  display: flex;
  justify-content: space-between;
}

img {
  max-width: 100%;
}

.media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

.image1 {
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 1; 
  grid-row-end: 2; 
}

.image2 {
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 2; 
}

/** .image1, .image2 {
  margin-bottom: -3px;
}
**/

.video {
  grid-column-start: 1; 
  grid-column-end: 3; 
  grid-row-start: 2; 
  grid-row-end: 3;
} 
 <div class="wrapper">
    
    <nav class="main-nav">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
        </ul>
    </nav>
    
    <header class="main-head">
        <p>TITLE</p>
        <p>in progress</p>
        <p>by me</p>    
    </header>
   
    <div class="content">
  
        <h1>film title 2020 00:05:00</h1>
        <div class="media">
            <div class="image1"><img src="http://nyveen.ca/bb-test/images/1.png"></div>
            <div class="image2"><img src="http://nyveen.ca/bb-test/images/2.png"></div>
            <div class="video">
                <div style="padding:46.88% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/207028770" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
                <script src="https://player.vimeo.com/api/player.js"></script>
            </div>          
        </div>  

        <h1>second film 2020 00:05:00</h1>
        <div class="media">
            <div class="image1"><img src="http://nyveen.ca/bb-test/images/3.png"></div>
            <div class="image2"><img src="http://nyveen.ca/bb-test/images/4.png"></div>
            <div class="video">
                <div style="padding:42.5% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/108650530?color=ffffffamp;title=0amp;byline=0amp;portrait=0amp;badge=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
                <script src="https://player.vimeo.com/api/player.js"></script>
            </div>          
        </div>  
        
    </div> 

    <footer class="main-footer">The footer</footer>
    
</div>

Ответ №1:

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

 .image1 {
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    height: 100%;
}

.image2 {
    grid-column-start: 1; 
    grid-column-end: 2; 
    grid-row-start: 1; 
    grid-row-end: 2; 
    height: 100%;
}

.image1 img, .image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Что касается вашего второго вопроса. Я не вижу никаких границ для media div.

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

1. Потрясающе. Спасибо за исправление желоба. Я не указываю границу CSS для медиа-раздела. Возможно, мне следовало написать «встроенные видео выходят за пределы медиа-раздела ….»

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

3. При дальнейшем рассмотрении встроенные смещаются только в Safari. Chrome выглядит великолепно.

4. Можете ли вы отправить скриншот, как это выглядит в Safari?

5. И, похоже, это происходит только в Safari v.13. Safari v.14 в порядке.