响应式网页设计 - 图像

Użycie atrybutu width

Jeśli width Atrybut ustawiony na procent, a wysokość ustawiona na "auto", obraz będzie się dostosowywał do powiększania lub zmniejszania:

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

Proszę zauważyć, że w powyższym przykładzie, obraz może zostać powiększony do większego rozmiaru niż jego oryginalny rozmiar. W większości przypadków lepszym rozwiązaniem jest zmiana na użycie max-width Atrybut.

Użycie atrybutu max-width

Jeśli ustawisz atrybut max-width na 100%, obraz zostanie zmniejszony na żądanie, ale nigdy nie zostanie powiększony do większego rozmiaru niż jego oryginalny rozmiar:

实例

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

Dodaj obraz do strony instancyjnej

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

Obraz tła

Obraz tła może również reagować na zmianę rozmiaru i skalowanie.

Oto trzy różne metody, które prezentujemy:

1. Jeśli ustawisz background-size Ustawienie wartości "contain" powoduje, że obraz tła zostanie skalowany i starano się dopasować obszar treści. Jednak obraz zachowa proporcje długości i szerokości (proporcje między szerokością a wysokością obrazu):

To jest kod CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid red;
}

亲自试一试

2. Jeśli background-size Jeśli wartość atrybutu ustawiona jest na "100% 100%", obraz tła zostanie rozciągnięty, aby pokryć całą obszar zawartości:

To jest kod CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}

亲自试一试

3. Jeśli background-size Jeśli wartość atrybutu ustawiona jest na "cover", obraz tła zostanie skalowany, aby pokryć całą obszar zawartości. Proszę zauważyć, że wartość "cover" zachowuje proporcje długości i szerokości, a może przyciąć część obrazu tła:

To jest kod CSS:

实例

div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: cover;
  border: 1px solid red;
}

亲自试一试

Przygotuj różne obrazy dla różnych urządzeń

Duży obraz wygląda dobrze na dużych ekranach komputerowych, ale jest bezużyteczny na małych urządzeniach. Dlaczego ładuje się duży obraz, gdy musimy go zmniejszyć? Aby zmniejszyć obciążenie lub z innych powodów, możesz użyć zapytań mediowych, aby wyświetlać różne obrazy na różnych urządzeniach.

To jest duży obraz i mały obraz, które będą wyświetlane na różnych urządzeniach:

实例

/* Dla szerokości ekranu mniejszej niż 400 pikseli: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Dla szerokości ekranu 400 pikseli lub większej: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

Możesz użyć zapytań mediowych min-device-width zamiast min-width Sprawdź szerokość urządzenia, a nie szerokość przeglądarki. Następnie, gdy zmniejszasz rozmiar okna przeglądarki, obraz nie zmieni się:

实例

/* Dla urządzeń o szerokości ekranu mniejszej niż 400 pikseli: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* Dla urządzeń o szerokości ekranu 400 pikseli i większej: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

Element <picture> w HTML5

HTML5 wprowadził <picture> Element, który pozwala na zdefiniowanie wielu obrazów.

Wspieranie przeglądarek

38.0 13 38.0 9.1 25.0

<picture> Działanie elementu jest podobne do <video> i <audio> Elementy. Ustawiliśmy różne źródła, a pierwszym źródłem o priorytecie dopasowania jest używane źródło:

实例

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>

亲自试一试

srcset 属性是必需的，它定义图像的来源。

media 属性是可选的，它接受可在 CSS @media规则 中找到的媒体查询。

提示：您还应该为不支持 <picture> 元素的浏览器定义 <img> 元素。