Адаптивное изображение в зависимости от высоты контейнера - PullRequest
Новая
       33

Адаптивное изображение в зависимости от высоты контейнера

0 голосов
/ 26 апреля 2018

Я работаю над воссозданием своего веб-сайта, и мне бы хотелось, чтобы изображения отображались в размере, который классифицирует разделы.Я хотел бы, чтобы эти изображения были адаптивными в зависимости от высоты контейнера.Например, если контейнер имеет 600 пикселей в высоту, я хочу, чтобы изображение было 600 пикселей в высоту независимо от ширины.Прямо сейчас я использую background-size: contain;, который работает в режиме рабочего стола, но после определенной ширины изображение начинает уменьшаться в пользу сохранения ширины контейнера.

В режиме рабочего стола оно работает нормально:enter image description here

В мобильном я получаю это: enter image description here

Когда я хочу это: enter image description here

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

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

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

С учетом вышесказанного, я бы рекомендовал изменить ваш CSS на что-то вроде следующего:

.hero {
  width: 100vw;
  height: 100vh;
  background-image: url(../images/hero.jpg);
  background-size: cover;
  background-position: center, center;
}

background-size: cover вместе с background-position: center позаботятся о том, чтобы оно отображалось так, как вы хотите в мобильном телефоне.Не обязательно именно эта часть изображения, возможно, вам придется работать с графическим редактором.

width: 100vw и height: 100vh, которые я использовал в этом примере, - это размер контейнера вкакое изображение является фоном, это также имеет значение, когда речь идет о том, как изображение отображается.vw - ширина области просмотра, vh - высота области просмотра.Этот блок хорош для работы с адаптивными дисплеями, поскольку он принимает во внимание экран, чтобы определить размер любого стиля, в который вы его вставляете.

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

Это было бы что-то вроде 

@media only screen and (max-width: 480px) {
    .hero {
      width: 100vw;
      height: 100vh;
      background-image: url(../images/hero.jpg);
      background-size: cover;
      background-position: center, center;
    }
}

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

0 голосов
/ 26 апреля 2018

Вы можете использовать media-queries: 

@media only screen and (max-width: 600px) {
    img {
        background-size:cover;
    }
}

Вы можете прочитать больше о media- queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Вы можете прочитать больше о background-size: https://www.w3schools.com/cssref/css3_pr_background-size.asp

...