Вертикально-отзывчивое CSS изображение - PullRequest
Новая
       61

Вертикально-отзывчивое CSS изображение

0 голосов
/ 11 июля 2020

Я знаю, что мы можем легко создать адаптивное горизонтальное изображение, вот так. 

.img-horiz-resp {
  max-width:100%;
  height:auto;
}

Но в моем случае мне нужно:

  • заголовок вверху
  • контент (пока это может быть простое изображение)
  • нижний колонтитул

Затем, изменяя размер браузера по вертикали, я sh, что 'контент 'адаптировать его размер.

Я попробую здесь: https://codepen.io/cdemez/pen/qBbKVYp

Но безуспешно.

1 Ответ

0 голосов
/ 11 июля 2020

Используя VH для высоты, вы можете сделать изображение отзывчивым (есть и другие способы, но это просто). VH используется для определения того, какая часть доступной высоты должна использоваться, например, процент (%). 100VH - это весь экран сверху вниз, независимо от размера экрана. Теперь я поместил изображение в файл css (и использовал его ТОЛЬКО в качестве фона, а не фонового изображения), но если вы хотите использовать его в своем html -файле, не забудьте установить для параметра with значение 100%. https://jsfiddle.net/battleaxe/u07cfbog/# и вместеjs = lbxrukCzHi

HTML: 

 * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      height: 100%;
      min-height: 100%;
      font-family: Arial, Helvetica, sans-serif;

      display: flex;
      flex-direction: column;
      align-items: center;
    }
    header {
      height: 6vh;
      width: 100%;
      background-color: #2e4b49;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ul {
      width: 60%;
      display: flex;
      justify-content: space-between;
      list-style: none;
      color: #fff;
      text-transform: uppercase;
    }
    .content {
      height: 84vh;
      width: 100%;
      background: url("https://cdn.socloze.com/cdn/e_663aa122-718e-a8d3-301d-39f64b8523b0/ebdc5bef01506acc759b39f64b9cc917.jpg")
        no-repeat center center;
      background-size: contain;
      /* You can use background-size: cover; if you want the image to cover your whole free space. */
    }
    footer {
      height: 10vh;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #2e4b49;
      color: #fff;
    }
   




    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>Document</title>
      </head>
      <body>
        <header>
          <ul>
            <li>This</li>
            <li>Is</li>
            <li>a</li>
            <li>Header</li>
          </ul>
        </header>
        <div class="content"></div>
        <footer>
          <p>This is a footer</p>
        </footer>
      </body>
    </html>

Вы можете найти VH и VW, как они работают и как их можно использовать. Также попробуйте разные размеры фона (обложка, контейнер и т. Д.).

Удачи!

...