Szerokość właściwości width należy ustawić na 100% dla elementu <img> języka HTML, takie podejście umożliwi automatyczne dostosowanie wyświetlanego obrazka do szerokości okna przeglądarki internetowej (Listing 1). Końcowy rezultat widoczny na rysunku 1.
Listing 1. Kod HTML przedstawiony w pliku index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="author" content="mgr inż. Piotr Klimek"/>
<title>Ogród Saski w Lublinie, 2015 rok</title>
<style type="text/css">
img {
/* Szerokość elementu img w procentach obowiązkowa */
width: 100%;
}
</style>
</head>
<body>
<img alt="Ogród Saski w Lublinie, 2015 rok" src="/ogrod-saski-lublin-2015.jpg" />
</body>
</html>
Rys. 1. Obrazek wyświetlony za pomocą elementu <img>
Materiały do artykułu można znaleźć w pliku element-img-html.zip – kodowanie plików tekstowych UTF-8, znaki końca linii (Unix). Zdjęcie przedstawione w artykule zostało wykonane w Ogrodzie Saskim, Lublin 2015 rok, Sierpień.
Wybrane książki:
- Laura Lemay, Rafe Colburn, Jennifer Kyrnin: HTML, CSS i JavaScript dla każdego. Wydanie VII, Wydawnictwo Helion, 2016.
- Karl Bunyan: HTML5. Tworzenie gier z wykorzystaniem CSS i JavaScript, Wydawnictwo Helion, 2016.
- Jon Duckett: HTML i CSS. Zaprojektuj i zbuduj witrynę WWW, Wydawnictwo Helion, 2014.