Отображение определённой части картинки в HTML и CSS

Быстрый ответ

Если нужно отобразить только определенный сегмент изображения, можно воспользоваться свойством CSS clip-path или поместить изображение в элемент div с применённым overflow: hidden;. Пример использования метода overflow выглядит следующим образом:

<div style="width: 200px; height: 150px; overflow: hidden;">
  <img src="image.jpg" style="position: relative; left: -50px; top: -100px;">
</div>

Мы создали область просмотра размером в 200x150 пикселей, и при этом с помощью свойств left и top, мы можем регулировать видимую часть изображения.

Применяем clip-path

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

.circular-clip {
  clip-path: circle(50% at center);
}

Важно учесть контекст вашего HTML-элемента. Блочные элементы вроде div или p, и строчные элементы случая span могут проявляться по-разному при обрезке. Проверка реализации в разных браузерах поможет обеспечить консистентность пользовательского опыта.

Эксперименты с фоном в CSS

Дополнительный подход — использование изображения в качестве фона контейнера, управляя свойствами background-size и background-position:

.image-section {
  width: 50px;  /* Ширина обязательна */
  height: 50px; /* Высота – не менее важный параметр */
  background-image: url('image.jpg'); /* Звезда нашего шоу – изображение */
  background-repeat: no-repeat; /* Отключаем повторение */
  background-size: cover; /* Заполняем всю доступную площадь */
  background-position: center;  /* Выравнивание изображения по центру */
}

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

SVG и clip-path: новая ступень

Применение SVG с clip-path в сочетании с функцией 'url' предоставляет возможность создавать уникальные контуры обрезки. Определите в SVG требуемый путь и примените его в CSS:

<svg width="0" height="0">
  <defs>
    <clipPath id="svgClip">
      <!-- Ваше творческое поле: задайте путь обрезки -->
      <circle cx="50" cy="50" r="50" />
    </clipPath>
  </defs>
</svg>

<div style="clip-path: url(#svgClip);">
  <img src="image.jpg">
</div>

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

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

Не забывайте о тестировании в различных браузерах и на разных устройствах, чтобы обеспечить стабильный пользовательский опыт и избежать неприятных сюрпризов. Ресурсы вроде Can I Use всегда помогут вам оставаться в курсе совместимости.

Визуализация

Давайте вообразим процесс обрезки изображения в HTML/CSS, как будто вы работаете над шедевром в области изобразительного искусства:

Вы нашли художественную галерею 🎨 с великолепной картиной 🖼️, но желаете показать только часть:

Полный экспонат:      [🌅🌄🌆🏙️]
Выбранный фрагмент:   [🌄]

Применяя CSS, вы выделяете желаемый участок:

.frame {
  width: 100px;  /* Устанавливаем границы ширины */
  height: 100px; /* и высоты */
  overflow: hidden; /* Что излишне, то отсеиваем */
}

.picture {
  position: relative;
  left: -50px;  /* Определяем величину смещения по горизонтали */
  top: -50px;   /* и вертикали */
}

На этом фрагмент вашего шедевра готов:

[🖼️] ➡️ [🖼️🖽] ➡️ `[🌄]`

Теперь на вашем холсте великолепно сияет рассвет 🌄. Кто бы мог подумать!

clip-path против позиционирования

При использовании clip-path всегда проверяйте, чтобы контур и регион обрезки соответствовали размерам изображения. Методы с position: absolute; великолепно работают с overflow: hidden для базовых настроек, но ограничивают выбор возможностей, которые в полной мере предлагает clip-path.

Важно чётко понимать поток элементов и ведение clip-path с position: relative; в контексте flex и grid систем.

Функционал CSS clip считается устаревшим, поэтому clip-path становится первостепенным выбором для современных и адаптивных веб-разработок.

Полезные материалы

1. object-fit | CSS-Tricks — обсуждение свойства object-fit для управления отображением изображений.
2. Fun with Viewport Units | CSS-Tricks — изучение единиц измерения по отношению к viewport (vh, vw, vmin, vmax) для адаптивного дизайна.
3. Responsive images | MDN — руководство по атрибуту srcset для создания адаптивных изображений.
4. mix-blend-mode | MDN — методы смешивания фоновых изображений с помощью CSS.
5. position | MDN — понимание позиционирования элементов в CSS.
6. A Complete Guide to Flexbox | CSS-Tricks — всестороннее руководство по функциям Flexbox в CSS.
7. The Z-Index CSS Property | Smashing Magazine — разъяснение использования свойства z-index в CSS.