DummyImagesURIs

Объект типа «ассоциативный массив», значения которого содержат примитивные изображения разных размеров и пропорций (по сути, монохромный фон с надписью длин сторон), закодированные по стандарту Base64, благодаря чему для их отображения не требуется подключение к интернету. Такие картинки удобно использовать в качестве тестовых при адаптации вёрстки под изображения разных размеров и пропорций, а также просто в качестве заполнителей на ранних этапах разработки, когда под рукой нет образцов реальных изображений.

По умолчанию, DummyImagesURIs имеет следующие ключи:

aspectRatio19x6

Изображение с соотношением сторон 19 x 6

aspectRatio4x3

Изображение с соотношением сторон 4 x 3

wideAndLow

Очень длинное изображение с малой высотой

highAndNarrow

Очень высокое изображение малой длины

small

Маленькое изображение

• aspectRatio19x6
• aspectRatio4x3
• wideAndLow
• highAndNarrow
• small

Проблематика

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

Для того, чтобы более-менее быть уверенным в том, что подготовленная вёрстка действительно адаптирована к разным изображениям, следует иметь наготове несколько тестовых картинок разных размеров и пропорций вплоть до крайних случаев, например когда изображение имеет высоту в несколько раз больше ширины. Если у Вас такие изображения есть, то можете их и использовать. Но скорее всего, такого набора изображений у Вас под рукой нет, как и достаточного времени на поиск их. Именно для таких случаев DummyImagesURIs и задуманы.

Пример

Кликабельные карточки с изображениями, представленные выше, свёрстаны следующим образом:

ul.DummyImagesURIsGallery

  each imageURI, key in DummyImagesURIs

    li

      button(
        aria-label=`Скопировать выражение вызова свойства "${ key }" у объекта "DummyImagesURIs"`
      )

        span(
          role="presentation"
          style=`background-image: url("${ imageURI }");`
        )

@require "../../../../../../../../node_modules/@yamato-daiwa/frontend/Functionality.styl"


.DummyImagesURIsGallery

  display grid
  grid-template-columns repeat(auto-fit, minmax(7rem, 1fr));
  gap 0.5rem


  margin-top 0.9rem
  pushTargetFromSelf({ targetElementSelector: ".Article-Heading2", y: 1.6rem })


  li

    display flex
    flex-direction column


    button

      ButtonLikeElementsPrimer()

      display flex
      justify-items center
      align-items center
      flex-direction column
      row-gap 0.8rem

      cursor pointer

      background-image linear-gradient(lightgoldenrodyellow, aliceblue)


      &:hover

        transform scale(1.05)
        transition transform 1s ease-in-out


    span

      width 100%
      aspect-ratio 1 / 1

      margin-left auto
      margin-right auto

      align-self center

      background-size contain
      background-position center
      background-repeat no-repeat


    code

      font-family Consolas, monaco, monospace

      Paddings({
        horizontalSymmetric: 0.5rem,
        bottom: 0.3rem
      })

      applyTextGeometryWithoutExtraSpaceCausedByLineHeight({
        fontSize: 1rem,
        lineSpacing: 0.4,
        mustAllowWordsBreakingAnywhere: true
      })

      font-weight bold
      color: ShadesOfGray__39ColorsW3C_Palette[12]

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