Ocena użytkowników: 5 / 5

Gwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywnaGwiazdka aktywna
 

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>

 

Obrazek wyświetlony za pomocą elementu <img>

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:

Książki Helion

Promocja dnia

REKLAMA

Tagi - Popularne