Правильно масштабируйте изображение (например, css -grid, flexbox), чтобы оно занимало доступное пространство - PullRequest
Новая
       9

Правильно масштабируйте изображение (например, css -grid, flexbox), чтобы оно занимало доступное пространство

0 голосов
/ 11 марта 2020

У меня есть изображение и текст описания для изображения ниже. Я хочу, чтобы изображение занимало столько места, сколько нужно, чтобы использовать полную ширину div, но не больше, чем доступно. Если остается вертикальное пространство, оно должно оставаться внизу.

Я попытался сделать это с помощью flexbox: 

#image{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: block;

    flex-grow: 99;
    flex-shrink: 99;
}

#flex-box{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: center;
    text-align: center;
}
<div id="flex-box">
    <img id="image" src="https://material.angular.io/assets/img/angular-material-logo.svg">
  <h1>A header</h1>
  <p>A paragraph</p>
  <p>Another paragraph</p>
</div>

Проблемы:

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

Еще одна попытка с сеткой css была следующей: 

#images {
  width: 100%;
  max-height: 100%;
  object-fit: scale-down;
}

#grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: 1fr auto auto auto;
  text-align: center;
  justify-items: center;
}

#image-container {
  width: 100%;
}
<div id="grid">
  <div id="image-container">
    <img id="image" src="https://material.angular.io/assets/img/angular-material-logo.svg">
  </div>
  <h1>A header</h1>
  <p>A parapraph</p>

  <p>Another paragraph</p>
</div>

Проблемы здесь:

  • Изображение снова не масштабируется вверх.
  • Содержание растянуто вертикально по экрану.

Что было бы необходимо для достижения свойств?

Ответы [ 2 ]

0 голосов
/ 11 марта 2020

Если вы используете bootstrap 4, то приведенный ниже код может помочь вам без использования пользовательских классов css. Все это использует bootstrap встроенные классы, и он автоматически корректирует содержимое. 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<title>Bootstrap Template</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col border"> <img src="https://material.angular.io/assets/img/angular-material-logo.svg" class="img-fluid">
                <h1 class="text-center">A header</h1>
                <p class="text-center">A paragraph</p>
                <p class="text-center">Another paragraph</p>
            </div>
            <div class="col border text-center align-self-center">
                <h2>AA</h2>
            </div>
            <div class="col border text-center align-self-center">
                <h2>BB</h2>
            </div>
        </div>
        <div class="row">
            <div class="col text-center border">
                <h2>B</h2>
            </div>
            <div class="col border text-center align-self-center">
                <h2>C</h2>
            </div>
        </div>
    </div>
</body>
</html>
0 голосов
/ 11 марта 2020

На изображении вы можете поиграться, используя максимальную ширину и регулируя высоту: 

#image {
    max-width: 100%;
    max-height: 50vh;
}

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

...