Вертикально выровняйте div и поместите изображение внутри него - PullRequest
Новая
       2

Вертикально выровняйте div и поместите изображение внутри него

0 голосов
/ 22 февраля 2019

Я хочу создать очень простую программу просмотра изображений.Когда вы щелкаете по миниатюре, большая версия этой миниатюры должна открываться на черном фоне с непрозрачностью 0,8.Это изображение ...

  • не может превышать 80% высоты окна.
  • не может превышать 80% ширины окна.
  • должно центрироваться горизонтальнои по вертикали.
  • должен всегда сохранять соотношение сторон.
  • не может быть фоновым изображением.
  • не должно быть изменено с помощью JavaScript.

Моя самая большая проблема заключается в том, что высота изображения внутри div превышает 80% высоты окна (80 ч), когда вы проверяете его на мобильных устройствах (см. Панель инструментов устройства Chrome).Самое странное, что мой div работает нормально: его максимальная высота 80vh ... Вот мой код, возможно, кто-то увидит ошибку, которую я делаю: 

#gallery {
    overflow: hidden;
}

.Gallery {
    align-items: center;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 10;
}

.Gallery-imageWrapper {
    max-height: 80%;
    max-width: 80%;
    position: relative;
}

.Gallery-close {
    background: rgb(21, 21, 21);
    color: rgb(255, 255, 255);
    display: block;
    font-weight: 700;
    height: 20px;
    line-height: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 20px;
}

.Gallery-image {
    max-height: 100%;
    max-width: 100%;
}
<div class="Gallery">
    <div class="Gallery-imageWrapper">
    <a class="Gallery-close" href="#" title="Sluiten">x</a>
        <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
    </div>
</div>

Я пробовал другие свойства CSS, такие как подгонка объекта, ширина, высота, положение, ... в элементе изображения, но, кажется, ничто не может его исправить.Кто-нибудь, кто может мне помочь, пожалуйста?:)

Спасибо!

1 Ответ

0 голосов
/ 23 февраля 2019

Если вы можете использовать единицы просмотра, попробуйте с vmin - равным меньшему из vw и vh.

Стиль ключа: 

.Gallery-image {
  max-width: 80vmin;
  max-height: 80vmin;
}

Полная демонстрация:

.Gallery {
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.Gallery-imageWrapper {
  position: relative;
}

.Gallery-close {
  background: rgb(21, 21, 21);
  color: rgb(255, 255, 255);
  position: absolute;
  font-weight: 700;
  right: 0;
  top: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
}

.Gallery-image {
  max-width: 80vmin;
  max-height: 80vmin;
}
<div class="Gallery">
  <div class="Gallery-imageWrapper">
    <a class="Gallery-close" href="#" title="Sluiten">x</a>
    <img class="Gallery-image" src="https://placehold.it/600x600" alt="Screenshot website Optiek Cardoen" title="Website Optiek Cardoen">
  </div>
</div>

Кроме того:

CSS-селекторы обычно не чувствительны к регистру;это включает селекторы класса и ID.Убедитесь, что вы держите его в согласованном состоянии.

...