Размер содержимого по вертикали для просмотра - PullRequest
Новая
       127

Размер содержимого по вертикали для просмотра

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

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

<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    <h1>Image</h1>
    <p>An image that should fill up the space in between</p>
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>

Возможно, это невозможно. Есть идеи?

Ответы [ 3 ]

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

Макет на самом деле полностью возможен, но требует небольшого изменения вашего HTML. Вам нужно будет обернуть ваш элемент <header>, <main> и <footer> в div обертки, для которого установлено значение display: flex; flex-direction: column, чтобы они использовали CSS flexbox для выполнения требований макета с заполнением пространства.

Затем в элементе <main> вы делаете тот же трюк с флексбоксом CSS. Тем не менее, вы должны обернуть ваш элемент <img> в <div>, который будет расти до любого доступного пространства.

Пока ваш макет будет выглядеть так: 

<div class="wrapper">
  <header><!-- Header content --></header>
  <main>
    <!-- More content -->
    <div class="image">
      <img src="..." />
    </div>
  </main>
  <footer><!-- Footer content --></footer>
</div>

Ваш элемент <img> затем будет настроен на абсолютное позиционирование, полностью покрывая его родительский элемент <div>, и использует object-fit: cover для определения размера, чтобы заполнить все пространство при сохранении соотношения сторон.

Вот пример проверки концепции. Однако вам может потребоваться просмотреть его на полной странице (или отметьте это JSFiddle ), поскольку встроенный предварительный просмотр фрагмента кода слишком мал для демонстрации макета: 

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header, footer {
  background-color: steelblue;
  color: #eee;
}

main {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.image {
  flex: 1 1 100%;
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}
<div class="wrapper">
  <header>
      <h1>Some header stuff</h1>
      <p>Such as a navigation bar at the top of the viewport.</p>
  </header>
  <main>
      <h1>Image</h1>
      <p>An image that should fill up the space in between</p>
      <div class="image">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
      </div>
  </main>
  <footer>
      <h1>Some footer stuff</h1>
      <p>Such as a logo, link to privacy page etc.</p>
  </footer>
</div>
0 голосов
/ 08 апреля 2020

Вот мое решение, включающее идеи Терри: 

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    * {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    header,
    footer {
      background-color: steelblue;
      color: #eee;
      padding-left: 2rem;
    }
    
    main {
      flex: 1 1 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-left: 2rem;
    }
    
    .body-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .image-wrapper {
      flex: 1 1 100%;
      position: relative;
    }
    
    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="body-wrapper">
    <header>
      <h1>Navigation Bar Goes Here</h1>
    </header>
    <main>
      <h1>Photo Caption Goes Here</h1>
      <div class="image-wrapper">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Photo: Copy of Photo Captions Goes Here" />
      </div>
      <h2>The Album Caption Goes here</h2>
    </main>
    <footer>
      <h1>Footer Goes Here</h1>
    </footer>
  </div>
</body>

</html>
0 голосов
/ 07 апреля 2020 

header{
height:10vh;
}
footer{
height:10vh;
}
main{
height:65vh;
background:url("https://www.bing.com/th?id=ABT63B35E950543A69BB040AEFA5BFCA186A43A5798E5E9B96844F4CE0ED7176910&w=608&h=200&c=2&rs=1&pid=SANGAM") no-repeat center center fixed;
background-size:cover;
}
<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>
...