МОДУЛ 04 / УРОК 09

Responsive изображения и адаптивни компоненти

Научи как изображенията се приспособяват към различни екрани, как да управляваш пропорциите им и как да създаваш адаптивни компоненти без изкривяване.

HTML & CSSИнтерактивен урок12. клас

01 / НАУЧИ

Изображения, които се адаптират

Адаптивното изображение се побира в наличното пространство, без да нарушава оформлението на страницата. Често използваме max-width: 100% и height: auto, за да запазим естествените пропорции.

Размери и изрязване

Свойството aspect-ratio задава желаното съотношение между ширина и височина. С object-fit: cover изображението запълва рамката, като част от него може да бъде изрязана.

При object-fit: contain цялото изображение остава видимо, но около него може да има свободно пространство.

Кое изображение зарежда браузърът?

HTML атрибутите srcset и sizes позволяват на браузъра да избере подходящ ресурс според ширината на изображението в оформлението и плътността на пикселите на екрана.

Елементът <picture> позволява да задаваме различни източници или композиции според медийни условия. Това е полезно например когато на телефон искаме по-тясно кадриране на една и съща сцена.

Винаги добавяй подходящ alt текст, когато изображението носи информация. За чисто декоративни изображения обикновено се използва празен alt="".

CSS / RESPONSIVE IMAGES

Размер, пропорции и кадриране

CSS управлява показването на изображението, а HTML може да предложи подходящ файл за зареждане.

.responsive-image {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

HTML / srcset и sizes

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w"
  sizes="(max-width: 600px)
         100vw, 50vw"
  alt="Планински пейзаж"
>

Примерните имена на файлове показват синтаксиса. В реален сайт те трябва да сочат към съществуващи изображения.

02 / РАЗГЛЕДАЙ

Responsive Images Playground

Променяй ширината, aspect-ratio и object-fit. Сравни как едно и също изображение се показва при различни настройки.

Илюстрация на планински пейзаж с езеро и слънце

cover: изображението запълва рамката, като част от него може да се изреже.

Генериран CSS

03 / ПРОМЕНИ

Експериментирай с изображение

Промени aspect-ratio от 16 / 9 на 1 / 1. След това сравни object-fit: cover и contain.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<div class="image-card">
  <img src="/images/responsive-landscape.svg" alt="Планински пейзаж с езеро">
  <h2>Открий природата</h2>
  <p>Едно изображение — различни оформления.</p>
</div>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
}

.image-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px;
  background: white;
  border-radius: 14px;
}

.image-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

/*
  ЕКСПЕРИМЕНТ:
  1. Смени aspect-ratio на 1 / 1.
  2. Смени object-fit на contain.
  3. Намали ширината на визуализацията.
*/

04 / СЪЗДАЙ

Създай адаптивна продуктова карта

Направи изображението адаптивно, запази пропорциите на рамката и осигури правилно кадриране. Използвай съществуващата HTML структура.

Изисквания към задачата

max-width: 100% на .product-image.
aspect-ratio: 16 / 9 на изображението.
object-fit: cover на изображението.
width: 100% на .product-card.
Смислен alt текст на изображението.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<article class="product-card">
  <img
    class="product-image"
    src="/images/responsive-landscape.svg"
    alt="Планински пейзаж с езеро"
  >

  <div class="product-content">
    <span class="product-category">EXUPERY / DESIGN</span>
    <h2>Открий нови хоризонти</h2>
    <p>Създай адаптивна карта с изображение.</p>
    <a href="#details">Научи повече</a>
  </div>
</article>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: Arial, sans-serif;
  background: #eef2f8;
  color: #182235;
}

.product-card {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: white;
  box-shadow: 0 8px 28px #18223518;
}

.product-image {
  display: block;
  width: 100%;
}

.product-content {
  padding: 24px;
}

.product-category {
  color: #d52f38;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
}

.product-content h2 {
  margin: 12px 0;
}

.product-content p {
  color: #52627b;
}

.product-content a {
  color: #d52f38;
  font-weight: bold;
}

/*
  ЗАДАЧА:
  1. Добави max-width: 100% към .product-image.
  2. Добави aspect-ratio: 16 / 9.
  3. Добави object-fit: cover.
  4. Направи картата адаптивна с width: 100%.
  5. Запази смислен alt текст в HTML.
*/

05 / ПРОВЕРИ

Провери петте изисквания към адаптивната продуктова карта.

Резултатите ще се появят тук след проверката.