Podaj w HTML prawidłowe atrybuty width i height obrazu, a następnie użyj CSS, aby jego wyświetlana szerokość dostosowywała się do układu, a wysokość była automatyczna. Wymiary od razu określają proporcje, ale nie blokują obrazu w tym rozmiarze wyświetlania. MDN: Obrazy multimedialne

Ten poradnik jest przeznaczony dla osób edytujących stronę HTML na Macu, które chcą, aby obraz zmieniał rozmiar wraz z kontenerem, a jednocześnie zajmował proporcjonalne miejsce jeszcze przed załadowaniem. Przykład zawiera samodzielną abstrakcyjną grafikę, dzięki czemu możesz sprawdzić działanie skalowania bez pobierania pliku.

Jak wymiary mogą rezerwować miejsce, nie ustalając rozmiaru wyświetlania?

Obraz ma wymiary zasobu, na przykład 1200 na 800 pikseli, oraz rozmiar wyświetlania określony przez układ. Te wartości mogą się różnić. Atrybuty wymiarów w HTML podają wskazówki dotyczące rozmiaru; arkusz stylów może nadpisać wyświetlaną szerokość i wysokość. Standard HTML mapuje też te atrybuty na preferowane proporcje w postaci auto 1200 / 800. Standard HTML: atrybuty treści osadzonych i obrazów

W przypadku zasobu o wymiarach 1200 na 800 proporcje wynoszą 3:2. Gdy układ określi wyświetlaną szerokość, przeglądarka może obliczyć proporcjonalną wysokość, zanim zasób zakończy ładowanie. MDN zaleca podawanie obu wymiarów wraz z responsywnym CSS, aby ograniczyć przesunięcia układu powodowane przez obrazy. MDN: Obrazy multimedialne

Podział odpowiedzialności jest prosty: HTML opisuje wymiary zasobu, a CSS określa, jak obraz dopasowuje się do strony. Zadbaj o spójność tych opisów. Podanie wymiarów jest przydatne nawet wtedy, gdy obraz nigdy nie będzie wyświetlany w oryginalnym rozmiarze.

Zdecyduj, czy obraz ma wypełniać kontener

Użyj poniższego fragmentu CSS, jeśli obraz ma wypełniać dostępną szerokość kontenera. Zakłada on, że obraz ma klasę responsive-image i prawidłowe atrybuty wymiarów:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
}

Jeśli obraz ma się zmniejszać w razie potrzeby, ale zachowywać zadeklarowaną szerokość, gdy jest więcej miejsca, użyj tego alternatywnego fragmentu:

.responsive-image {
  display: block;
  max-width: 100%;
  height: auto;
}

Drugi wzorzec to udokumentowane przez MDN podejście do utrzymywania obrazu w węższym kontenerze. W tym prostym układzie width: 100% wypełnia kontener, a max-width: 100% określa górną granicę szerokości. W obu wzorcach pozostaw height: auto, aby wysokość mogła wynikać z proporcji zamiast pozostawać równa wysokości podanej w HTML. MDN: Obrazy multimedialne

Wypróbuj kompletną stronę z responsywnym obrazem na Macu

Otwórz TextEdit, wybierz File > New, a następnie Format > Make Plain Text. Wklej cały poniższy dokument. Zapisz go jako shape-demo.html; jeśli TextEdit zapyta, jakiego rozszerzenia użyć, wybierz Use .html. Są to opisane przez Apple kroki tworzenia pliku HTML. Apple: Praca z dokumentami HTML w TextEdit na Macu

Dokument zawiera CSS oraz zakodowany SVG z oryginalną kompozycją złożoną z koła i prostokąta. Nie trzeba instalować żadnych dodatkowych plików ani pakietów. Wymiary zasobu i elementu obrazu to 1200 na 800.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shape sizing demo</title>
  <style>
    body {
      margin: 0;
      padding: 24px;
      font-family: system-ui, sans-serif;
      line-height: 1.5;
      color: #24343b;
    }

    main {
      max-width: 900px;
      margin: 0 auto;
    }

    .responsive-image {
      display: block;
      width: 100%;
      height: auto;
      background: #edf2f4;
    }
  </style>
</head>
<body>
  <main>
    <h1>Shape study A</h1>
    <p>Resize the window to change the composition's displayed size.</p>
    <img
      class="responsive-image"
      width="1200"
      height="800"
      alt="A blue circle beside an amber rounded rectangle."
      src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800' viewBox='0 0 1200 800'%3E%3Crect width='1200' height='800' fill='%23edf2f4'/%3E%3Ccircle cx='360' cy='400' r='180' fill='%234b8090'/%3E%3Crect x='660' y='220' width='300' height='360' rx='40' fill='%23d6a96b'/%3E%3C/svg%3E">
    <p>Marker B: this paragraph follows the image in normal document flow.</p>
  </main>
</body>
</html>

Otwórz zapisany plik w przeglądarce i zmniejsz szerokość okna. Kompozycja powinna zmniejszać się proporcjonalnie, a Marker B powinien pozostać pod nią. Zwiększanie szerokości okna powiększa kompozycję, aż kontener przykładu osiągnie maksymalną szerokość 900 pikseli. Ten limit jest przykładową decyzją projektową dotyczącą strony, a nie wymogiem techniki rezerwowania miejsca.

Osadzony zasób ładuje się natychmiast, więc przykład pokazuje responsywne skalowanie, a nie widoczne opóźnienie pobierania. Zakodowany SVG został przetworzony, a jego wymiary sprawdzone za pomocą Pythona; poniższe obliczenia również zostały wykonane. Podczas przygotowywania przykładu nie uruchomiono renderowania w przeglądarce.

Aby dostosować stronę do innego zasobu, zastąp wartość src i zaktualizuj oba wymiary HTML, tak aby odpowiadały temu zasobowi. W tych atrybutach używaj liczb całkowitych bez jednostek, takich jak 1200, zamiast 1200px. MDN określa taki format dla wymiarów obrazów. MDN: Element osadzający obraz

Ile miejsca powinna rezerwować przeglądarka?

W tym prostym układzie, w którym obraz nie ma obramowania ani dopełnienia, oczekiwaną wysokość oblicza się tak:

wyświetlana wysokość = wyświetlana szerokość × wysokość zasobu ÷ szerokość zasobu

Wymiary przykładu, 1200 na 800, dają poniższe przykładowe wyniki. Szerokości dotyczą obszaru treści obrazu, a nie całego okna przeglądarki.

Wyświetlana szerokość obrazu Proporcjonalna wysokość
300 pikseli CSS 200 pikseli CSS
600 pikseli CSS 400 pikseli CSS
900 pikseli CSS 600 pikseli CSS

To obliczenie przydaje się również w diagnostyce. Załóżmy, że rzeczywisty zasób ma wymiary 1200 na 800, ale w HTML błędnie zadeklarowano 1200 na 600. Przy wyświetlanej szerokości 600 pikseli zadeklarowane proporcje wskazują wysokość 300 pikseli; rzeczywiste proporcje wymagają 400 pikseli. Gdy pozna naturalne proporcje, przeglądarka może więc skorygować wysokość o 100 pikseli.

Korekta wynika z części auto wskazówki dotyczącej proporcji: gdy dostępne są naturalne proporcje obrazu, zostają użyte. Dlatego prawidłowe atrybuty mają znaczenie nawet wtedy, gdy arkusz stylów jest poprawny. Specyfikacja CSS określa różnicę między podanymi proporcjami a naturalnymi proporcjami elementu zastępowanego. Moduł CSS Box Sizing Level 4: preferowane proporcje

Kiedy zamiast tego użyć CSS aspect-ratio?

Użyj jawnych proporcji CSS, gdy układ celowo określa kształt pola obrazu. Na przykład kwadratowy kafelek wymaga innego podejścia niż proporcjonalne wyświetlenie całej kompozycji 3:2.

Poniższy fragment CSS zastępuje regułę z kompletnego przykładu. Zastąp nim istniejącą regułę .responsive-image:

.responsive-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: #edf2f4;
}

Tutaj aspect-ratio: 1 / 1 ustawia kwadratowe pole. Szerokość nadal dopasowuje się do układu, a automatyczna wysokość jest obliczana na jej podstawie. Preferowane proporcje wpływają na rozmiar, gdy co najmniej jeden wymiar jest ustawiony jako automatyczny; jawne ustawienie obu wymiarów odbiera im tę rolę. MDN: aspect-ratio

Deklaracja object-fit: contain sprawia, że cała kompozycja mieści się w kwadracie, pozostawiając puste miejsce tam, gdzie kształty nie wypełniają obszaru zasobu. Zmiana wartości na cover wypełnia kwadrat, ale przycina część kompozycji. Wybierz to zachowanie świadomie: kadrowanie może usunąć istotne fragmenty obrazu. MDN: object-fit

Jeśli tymczasowe proporcje mają ustąpić naturalnym proporcjom zasobu, CSS obsługuje również wartość taką jak aspect-ratio: auto 3 / 2. Po załadowaniu może ona zmienić proporcje pola, jeśli zasób ma inne. Proporcje bez auto określają natomiast preferowany kształt układu. Moduł CSS Box Sizing Level 4: preferowane proporcje

Co sprawdzić, jeśli obraz nadal przeskakuje lub się rozciąga?

Sprawdź zasób i układ w następującej kolejności:

  1. Sprawdź oba wymiary HTML. Powinny dokładnie opisywać zasób. Prawidłowa szerokość połączona z nieprawidłową wysokością nadal daje błędne proporcje.
  2. Sprawdź zastosowaną wysokość CSS. W przykładzie proporcjonalnym powinna wynosić auto. Inna pasująca reguła może przypisywać stałą wysokość.
  3. Sprawdź wyświetlaną szerokość. Obliczenie rezerwowanego miejsca zależy od szerokości ustalonej przez układ. Zmiana szerokości okna celowo zmienia tę wartość oraz proporcjonalną wysokość.
  4. Sprawdź jawne reguły proporcji. Kwadratowe proporcje CSS i naturalne proporcje 3:2 wyrażają różne założenia dotyczące rozmiaru.
  5. Osobno sprawdź dopasowanie obrazu. contain i cover określają, jak zasób mieści się w polu; nie uzupełniają brakujących wymiarów pola.

Te wskazówki opierają się na rozróżnieniu między polem elementu, jego preferowanymi proporcjami oraz wyświetlanym w nim zasobem. Poradnik MDN o proporcjach wyjaśnia, jak jawne wymiary wpływają na proporcjonalne skalowanie, a dokumentacja object-fit opisuje dopasowanie i przycinanie. MDN: Zrozumienie proporcji i ich ustawianie, MDN: object-fit

Obsługa przeglądarek ma też swoje ograniczenia. Według MDN właściwość CSS aspect-ratio jest szeroko obsługiwana w przeglądarkach od września 2021 r. Nie oznacza to obsługi w każdej starszej przeglądarce ani daty zgodności dla każdego sposobu mapowania wymiarów HTML. Jeśli wymagania obejmują starszą przeglądarkę, sprawdź informacje o zgodności w dokumentacji. MDN: aspect-ratio

Przy zwykłym proporcjonalnym wyświetlaniu obrazu zacznij od prawidłowych wymiarów HTML i responsywnego CSS. Użyj jawnych proporcji CSS, gdy strona wymaga pola o określonym kształcie. Dzięki tym rozwiązaniom możesz zarezerwować odpowiednie miejsce, a wyświetlany rozmiar nadal będzie dopasowywał się do układu strony.

Źródła