Źródło: Arkusze CKE
Na potrzeby strony internetowej przygotowano grafikę rysunek.jpg o rozmiarze: szerokość 200 px, wysokość 100 px. Aby wyświetlić tę grafikę jako miniaturę – pomniejszoną z zachowaniem proporcji, można zastosować znacznik
Warianty odpowiedzi
-
A
<img src="rysunek.png" style="width: 25px; height:25px;">
-
B
<img src="rysunek.png">
-
C
<img src="rysunek.png" style="width: 25px; height:50px;">
-
D
<img src="rysunek.png" style="width: 50px">
Wyjaśnienie
Kiedy chcesz pomniejszyć obrazek na stronie i zachować jego oryginalne proporcje, pamiętaj o jednej złotej zasadzie: podajesz w CSS tylko jeden wymiar – albo samą szerokość (width), albo samą wysokość (height).
W naszym przypadku plik ma wymiary 200 na 100 pikseli, czyli stosunek szerokości do wysokości wynosi 2 do 1.
Jeśli ustawisz w CSS wyłącznie width: 50px, przeglądarka sama przeliczy wysokość i automatycznie ustawi ją na 25px. Obrazek pomniejszy się idealnie proporcjonalnie.
Gdybyś sztywno podał oba wymiary i pomylił proporcje, obrazek zostałby sztucznie rozciągnięty lub spłaszczony, a tego w projektowaniu stron zawsze pragniemy uniknąć.