Как изменить размер изображения, чтобы оно всегда соответствовало размерам экрана (например, Bootstrap 4)? - PullRequest
Новая
       40

Как изменить размер изображения, чтобы оно всегда соответствовало размерам экрана (например, Bootstrap 4)?

0 голосов
/ 22 декабря 2018

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

Вот что я пытаюсь выполнить:

enter image description here

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

Я использую Bootstrap.Вот что я сделал: 

<div class="container py-3">
    <div class="row">
        <div class="col-sm-12">
            <img src="/images/gallery/inst01.jpg" class="img-fluid d-block rounded">
            <i class="fas fa-caret-square-left fa-2x "></i>
        </div>             
    </div>
</div>

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

Может кто-нибудь помочь?Спасибо

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

Это возможное решение Bootstrap4.Я обнаружил, что этот набор правил работает хорошо (проверьте поддержку браузеров: https://caniuse.com/#search=object-fit):

img {
    height: calc(100vh - your-last-item-height);
    max-width:100%;
    object-fit: cover;
}

Вот как это может работать: 

.col {
  height:100vh;
}

img{
  max-width: 100%;
  object-fit: cover;
  height: calc(100vh - 35px);
}

.item:last-child {
  max-height:35px; /* set here your last-item height */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    
<div class="container">
    <div class="row">
      <div class="col d-flex justify-content-center">
        <div class="d-flex flex-column">
          <div class="item"><img src="https://picsum.photos/500/500" class="rounded"></div>
          <div class="item"><i class="fas fa-caret-square-left fa-2x"></i></div>
        </div>             
    </div>
  </div>
</div>
0 голосов
/ 22 декабря 2018

используйте css 

img {
height: 100vh;
width: 100vh;
object-fit: cover;
}

, а также установите ширину и высоту родительского элемента соответственно

...