W hipertekstowym języku znaczników (HTML) specjalne polecenie „tag” służy do wyświetlania obrazu na stronie. Znacznik ten nosi nazwę img i zawiera zestaw zmiennych – „atrybuty”. Za pomocą atrybutów można określić wszystkie aspekty wyświetlania obrazu na stronie hipertekstowej, w tym jego wymiary. Nie jest to jednak jedyny sposób na rozwiązanie problemu - możesz również zmniejszyć rozmiar obrazu za pomocą Cascading Style Sheets (CSS).
Instrukcje
Krok 1
Umieść atrybuty wysokości i szerokości w tagu odpowiedzialnym za wyświetlanie pożądanego obrazu. Ustaw pierwszy na pionowy rozmiar obrazu, a drugi poziomo. Ustaw obie liczby w pikselach, ale nie ma potrzeby podawania jednostek - px - tutaj. Przy obliczaniu niezbędnych wartości dla tych atrybutów należy zwrócić uwagę na przestrzeganie proporcji redukcji obrazu, w przeciwnym razie będzie on wyświetlany w zniekształconej formie. Na przykład, aby umieścić na stronie obraz o połowę z pliku o nazwie SomePic.jpg, którego początkowe wymiary wynoszą 500 na 300 pikseli, tag można wykonać za pomocą następującego polecenia:
Krok 2
Możesz ustawić proporcjonalne zmniejszenie oryginalnych wymiarów obrazu w procentach. Aby to zrobić, użyj tylko atrybutu wysokości bez określania szerokości i dodaj znak procentu po określeniu liczby określającej rozmiar. Na przykład taki sam efekt, jak w przykładzie z poprzedniego kroku, można osiągnąć za pomocą tagu zapisanego w tej formie:
Krok 3
Jeśli chcesz określić rozmiar obrazu za pomocą opisu stylów, użyj tej samej nazwy tagu - img - oraz atrybutów - szerokość i wysokość. W takim przypadku należy zawsze podać jednostki miary – px, pt lub%. Aby ustawić o połowę rozmiar absolutnie wszystkich obrazów na stronie, umieść następujący wpis w bloku opisu stylu: img {height: 50%;} Jeśli chcesz zmniejszyć rozmiar tylko jednego obrazu, dodaj dodatkowy atrybut id do jego tagu i przypisz mu jedną unikalną dla obrazów tej wartości strony - na przykład PicOne: Dodaj tę samą wartość do rekordu stylu, oddzielając go „haszem” # od nazwy tagu. Pełny opis stylu w tym przypadku może wyglądać tak: img # OnePic {wysokość: 50%;}
