Responsywne projektowanie stron internetowych — obrazy
Zmień rozmiar okna przeglądarki, aby zobaczyć, jak obraz skaluje się, aby dopasować go do strony.
Korzystanie z właściwości szerokości
Jeśli widthwłaściwość jest ustawiona na wartość procentową, a heightwłaściwość jest ustawiona na „auto”, obraz będzie responsywny i skalowany w górę i w dół:
Przykład
img {
width: 100%;
height: auto;
}
Zwróć uwagę, że w powyższym przykładzie obraz można przeskalować w górę, aby był większy niż jego oryginalny rozmiar. W wielu przypadkach lepszym rozwiązaniem będzie skorzystanie z tej
max-widthwłaściwości.
Korzystanie z właściwości max-width
Jeśli max-widthwłaściwość jest ustawiona na 100%, obraz zostanie przeskalowany w dół, jeśli będzie to konieczne, ale nigdy nie będzie skalowany w górę, aby był większy niż jego oryginalny rozmiar:
Przykład
img {
max-width: 100%;
height: auto;
}
Dodaj obraz do przykładowej strony internetowej
Przykład
img {
width: 100%;
height: auto;
}
Obrazy tła
Obrazy tła mogą również reagować na zmianę rozmiaru i skalowanie.
Tutaj pokażemy trzy różne metody:
1. Jeśli background-sizewłaściwość jest ustawiona na „zawiera”, obraz tła będzie się skalował i spróbuje dopasować do obszaru zawartości. Obraz zachowa jednak proporcje (proporcjonalną relację między szerokością i wysokością obrazu):
Oto kod CSS:
Przykład
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-sizewłaściwość jest ustawiona na „100% 100%”, obraz tła rozciągnie się na cały obszar zawartości:
Oto kod CSS:
Przykład
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid red;
}
3. Jeśli background-sizewłaściwość jest ustawiona na „cover”, obraz tła zostanie przeskalowany, aby pokryć cały obszar zawartości. Zwróć uwagę, że wartość „okładka” zachowuje proporcje, a część obrazu tła może zostać przycięta:
Oto kod CSS:
Przykład
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
Różne obrazy dla różnych urządzeń
Duży obraz może być idealny na dużym ekranie komputera, ale bezużyteczny na małym urządzeniu. Po co ładować duży obraz, skoro i tak trzeba go zmniejszyć? Aby zmniejszyć obciążenie lub z innych powodów, możesz użyć zapytań o media, aby wyświetlić różne obrazy na różnych urządzeniach.
Oto jeden duży obraz i jeden mniejszy obraz, który będzie wyświetlany na różnych urządzeniach:
Przykład
/* For width smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For width 400px and larger: */
@media only screen and (min-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Możesz użyć zapytania o media min-device-width, zamiast min-width, które sprawdza szerokość urządzenia, a nie szerokość przeglądarki. Wtedy obraz nie zmieni się po zmianie rozmiaru okna przeglądarki:
Przykład
/* For devices smaller than 400px: */
body {
background-image:
url('img_smallflower.jpg');
}
/*
For devices 400px and larger: */
@media only screen and (min-device-width: 400px)
{
body {
background-image: url('img_flowers.jpg');
}
}
Element HTML <obraz>
Element HTML <picture>zapewnia programistom WWW większą elastyczność w określaniu zasobów graficznych.
The most common use of the <picture>
element will be for images used in responsive designs. Instead of having one
image that is scaled up or down based on the viewport width, multiple images can
be designed to more nicely fill the browser viewport.
The <picture> element works similar to the <video> and
<audio> elements. You set up different sources, and the first source that fits the
preferences is the one being used:
Example
<picture>
<source srcset="img_smallflower.jpg" media="(max-width:
400px)">
<source srcset="img_flowers.jpg">
<img
src="img_flowers.jpg" alt="Flowers">
</picture>
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in
CSS @media rule.
You should also define an <img> element for browsers that do not support the
<picture> element.