Подходящее соотношение сторон изображения для контейнера, который не имеет фиксированной ширины

Я не очень разбираюсь в соотношениях сторон, поэтому сегодня мне нужна помощь.

Проблема

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

Контекст и информация Пример оформления загрузочной карточки: https://jsfiddle.net/onigetoc/Lx1gs0pk/

В основном это тип кода, на который мы смотрим:

  <div class="card">
  <img class="card-img-top" src="..." alt="Card image cap" style="width: 100%;height:150px;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Извините, я не могу добавить свой собственный код, поэтому я предоставил примеры.

Высота изображения составляет 150 пикселей, однако ширина составляет 100%, чтобы заполнить контейнер.

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

В этом сценарии, когда мы знаем высоту, но не знаем ширину, какое соотношение сторон лучше всего выбрать?

Мне сказали, что обычно используется соотношение сторон 4:3.

Спасибо за помощь.


html css responsive-design responsive-images image-size
person HP.    schedule 16.07.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Соотношение сторон принадлежит объекту. Первоначально это х ширина на х высота. Это создает соотношение сторон. С тегом img, если вы укажете только ширину ИЛИ высоту, другая сторона будет масштабироваться пропорционально. Если вы укажете и то, и другое (ширину и высоту), изображение будет отображаться с этими размерами (при этом не учитывается соотношение сторон изображения).

Вы можете использовать процент для определения ширины ИЛИ высоты. Поэтому, если оно просматривается на устройствах с разными соотношениями сторон, ваше изображение всегда будет использовать ТОЛЬКО этот процент площади экрана, сохраняя при этом соотношение сторон изображения.

Обновление: если вы используете изображения в качестве фона, у вас есть дополнительные параметры (например, содержать и скрывать). Использование содержимого поместит (отобразит) все ваше изображение внутри родителя. При использовании обложки весь родитель будет заполнен изображением (возможно, сжимая или растягивая изображение).

Надеюсь, это поможет вам понять соотношение сторон.

person nocturns2    schedule 16.07.2019
comment
Привет, спасибо за объяснение, однако я все еще не понимаю, какое соотношение сторон лучше всего подходит для исходного изображения. Если бы вам нужно было выбрать соотношение сторон для контейнера высотой 150 пикселей и переменной ширины, вы бы выбрали 4:3, 16:9, 1:1 или что-то другое? - person HP.; 16.07.2019
comment
Я не знаю, различаются ли размеры вашей коллекции изображений или все они одинаковы. Если они различаются, вам нужно решить, какой размер для вас важнее (то есть, если вы не хотите сжимать и растягивать), ширина или высота. Соотношение 4:3 означает, что на каждые 4 дюйма ширины у вас будет 3 дюйма высоты (или 1280 пикселей в ширину и 960 пикселей в высоту) против 16:9 с той же структурой, но шириной 1280 пикселей и высотой 720 пикселей. Подумайте об этом, поскольку 16:9 — это широкий формат, используемый для кинофильмов, а 4:3 — для телевидения. - person nocturns2; 17.07.2019