Блог

Я пытаюсь создать макет, в котором изображения могут увеличиваться и уменьшаться в зависимости от ширины области просмотра. Когда только 2 изображения могут поместиться в окне просмотра, я дал им ширину 50% каждому. Когда только 3 изображения могут поместиться в окне просмотра, я дал им ширину 33,33% каждому. Когда только 4 изображения могут поместиться в окне просмотра, я дал им ширину 25% каждому. Я в основном делю количество изображений на 100. Но в какой-то момент, когда у меня будет, например, 6 изображений подряд, каждое из них займет 16,66% и т.д.

В настоящее время я использую flexbox и использую набор flex-wrap для переноса, чтобы они могли переноситься на новую строку, если область просмотра становится меньше. Я также использую медиа-запросы для изменения ширины изображений в зависимости от размера области просмотра.

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

Могу ли я использовать максимальную ширину вместо процента для достижения того же макета?

Когда на экране может поместиться только 2 изображения, я даю ему максимальную ширину 300 пикселей, например. И когда на экране может поместиться 3 изображения, я даю ему максимальную ширину 200 пикселей, например. Таким образом, изображения будут масштабироваться до тех пор, пока не достигнут максимальной ширины, а затем будут запущены медиа-запросы, и максимальная ширина изменится.

Каков наилучший подход для этого макета, который я пытаюсь использовать?

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

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

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

Поскольку вы хотите отображать одно и то же изображение на разных устройствах / с разной шириной окна просмотра, было бы хорошей тактикой использовать набор изображений, как описано в этом руководстве MDN.

Наверняка в вашем мобильном макете не отображается набор из 12 изображений или более (ширина ~ 17%). Но наоборот, 12 или более изображений на рабочем столе и 1 (мобильные телефоны) или 4 (в случае планшетных устройств).

Я не думаю, что вам нужен max-width правильный width % ввод для контейнера изображений и:

 img {
    width: 100%;
    height: auto;
}
  

достаточно. Например:

 .container {
  width: 100%;
  display: flex;
  align-items: stretch;
  align-content: space-evenly;
  justify-content: space-evenly;
  flex-flow: row;
}

.container div {
  width: 50%;
}

.responsive img {
  width: 100%;
  object-fit: contain;
  height: auto;
}  

 <div class="container">
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/238/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/247/1200/800" alt="A good friend">
    </picture>
  </div>
  <div>
    <picture class="responsive">
      <source media="(max-width:1024px)" srcset="https://picsum.photos/id/239/1024/600">
      <source media="(max-width:650px)" srcset="https://picsum.photos/seed/picsum/650/300">
      <source media="(max-width:465px)" srcset="https://picsum.photos/seed/picsum/465/300">
      <img src="https://picsum.photos/id/237/1200/800" alt="A good friend">
    </picture>
  </div>
</div>  

PS: Попробуйте изменить ширину области просмотра при просмотре фрагмента кода.