Jak utworzyć: responsywny obraz

Naucz się, jak używać CSS do tworzenia responsywnych obrazów.

Responsywny obraz automatycznie dostosuje się do rozmiaru ekranu.

zmień rozmiar okna przeglądarki, aby zobaczyć efekty responsywności:

Lights

zobacz efekty

Jak utworzyć responsywny obraz

krok pierwszy - dodaj HTML:

<img src="nature.jpg" alt="Nature" class="responsive">

krok drugi - dodaj CSS:

Jeśli chcesz, aby obraz był responsywny i mógł zarówno się powiększać, jak i zmniejszać, ustaw CSS width właściwość ustawiona na 100%,height ustawiono na auto:

przykład

.responsive {
  width: 100%;
  height: auto;
}

spróbuj sam

Jeśli chcesz, aby obraz się zmniejszał, ale nigdy nie powiększał się powyżej oryginalnego rozmiaru, użyj max-width: 100%:

przykład

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

spróbuj sam

Jeśli chcesz ograniczyć rozmiar odpowiedzi wektorowej do maksymalnego rozmiaru, użyj max-width właściwości oraz wybrana wartość pikseli:

przykład

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

spróbuj sam

strony związané

Tutorial:CSS obraz

Tutorial:CSS projektowanie responsywnej witryny