Ta lekcja jest swego rodzaju kontynuacją poprzedniej, w której rozważaliśmy, teraz czas pogłębić swoją wiedzę i zobaczyć Właściwości CSS Obrazy.
Wymiary obrazu w CSS
Zobaczmy co tu nowego stworzyłem klasę img w której ustawiam wymiary obrazka szerokość to szerokość, a wysokość to nasza wysokość, zaznaczyłem wymiary bardziej niż oryginalne, abyście wyraźnie widzieli jak obraz ulegnie zmianie.
Dla jasności podam przykład, gdzie będzie dużo tekstu, a zobaczysz, jakie są wcięcia z obrazka ten przykład wykorzystamy właściwość marży, która pozwoli Ci ocenić jej możliwości.
Dla jasności podam przykład, w którym będzie dużo tekstu, a zobaczysz, jakie są wcięcia z obrazu w tym przykładzie, użyjemy obrazu bez ustawiania wcięć, aby wyraźnie zobaczyć różnicę.
W przeglądarce widzimy:
W tym przykładzie zrobiłem wcięcia z obrazka dzięki parametrowi margin, który dał nam wcięcia ze wszystkich czterech krawędzi po 20 pikseli. Tutaj możesz wykonać bardziej skomplikowaną manipulację, możesz ustawić wcięcie od określonej krawędzi, na przykład:
- margin-top - margines od góry
- margin-right - margines z prawej strony
- margin-bottom - margines od dołu
- margin-left - margines od lewej strony
W związku z tym tutaj możesz wszystko dokładniej dostosować lub ustawić wcięcie tylko z jednej lub dwóch stron bez dotykania pozostałych.
W wyszukiwarce:
Ramkę ustawiamy wokół obrazu, dzięki parametrowi border najpierw ustawiamy szerokość ramki za pomocą border-width, ustawiamy w pikselach, potem styl ramki czyli jej wygląd border-style, tam jest kilka wartości do wyboru:
A ostatnim parametrem, który dostosujemy, jest kolor obramowania, który jest ustawiany przez parametr border-color.
W przeglądarce widzimy:
Jak rozumiesz, przypisaliśmy tło do tagu body dzięki selektorowi tagów, ponieważ zajmuje on cały dokument, możemy również przypisać inne tagi. Parametr background sprawił, że tło było dla nas obrazkiem, adres, na który piszemy w nawiasach. Możesz także manipulować tłem, na przykład:
tło: url(proba.png) powtórz-x;
Tło będzie się powtarzać tylko wzdłuż osi X, czyli poziomo w jednej linii.
tło: url(proba.png) powtórz-y;
Tło będzie się powtarzać tylko wzdłuż osi Y, czyli pionowo w jednej linii.
tło: url(proba.png) bez powtórzeń;
Tło nie będzie się powtarzać, ale pojawi się tylko jeden obraz.
rozmiar tła: 500px 200px;
to dodatkowy parametr A, który ustawia rozmiar, szerokość i wysokość tła obrazu.
Przejrzystość obrazu dzięki CSS
W przeglądarce widzimy:
Ta właściwość pojawiła się wraz z pojawieniem się CSS3 i faktycznie była dość szeroko stosowana. Zaimplementowany za pomocą parametru opacity ustawia przezroczystość obrazu, wartości od 0 do 1, oraz drugi parametr filtra: alpha(Opacity=50); robi to samo dla przeglądarka internetowa Explorier, ponieważ starsze wersje nie obsługują parametru opacity, wartości od 0 do 100. W przykładzie specjalnie wykonałem dwa obrazy, aby wyraźnie widać różnicę.
To kończy lekcję CSS Image Properties. Mam nadzieję, że ta lekcja była dla Ciebie przydatna i zainspirowała Cię do dalszej nauki języka i zdobycia nowej wiedzy.
Data publikacji: 2014-04-22
Obrazy są składnikami prawie każdej witryny, więc zmiana rozmiaru jest niezbędna. Istnieją 2 sposoby zmiany rozmiaru obrazu: edytor graficzny lub programowo Kod HTML na CSS.
Jeśli w kod css na html nie ustawiaj rozmiaru obrazka, wtedy jego wysokość i szerokość na stronie będzie taka sama w pikselach jak w Plik źródłowy. Oznacza to, że możesz zmienić rozmiar obrazu bez css i html, używając tylko edytora graficznego, a zmieni się on automatycznie na stronie, jeśli nie określisz jego rozmiaru. Ale zdarzają się przypadki, kiedy trzeba programowo zmienić rozmiar obrazu w css na html.
1. Zmiana obrazu w edytorze graficznym
Możesz zmienić rozmiar obrazu w dowolnym edytorze graficznym (photoshop, gimp, xnview) i automatycznie zmieni się on na stronie zgodnie z oryginalnym rozmiarem.
Zalety metody:
Obraz jest ładowany szybciej, ponieważ nie trzeba pobierać dodatkowych danych (pikseli), które następnie zostaną programowo skompresowane.
Minusy:
Edytory graficzne słabo kompresują obrazy o szerokości i wysokości mniejszej niż 200 pikseli.
Jeśli to możliwe i właściwe, spróbuj zmienić rozmiar w edytorze graficznym, aby obrazy ładowały się szybciej niż przy programowej zmianie rozmiaru. Różnica w prędkości może być dziesiątki razy.
2. Zmiana obrazu w kodzie css na stronie
Plusy:
Szybsze i wygodniejsze ustawienie rozmiaru. Ta metoda redukcja obrazu jest zwykle używana dla wygody. Przykładowo, gdy jeden obrazek może mieć wiele różnych rozmiarów, często wygodniej jest programowo zmienić wartości tego samego, niż wgrywać wszystkie opcje formatu jednego obrazu edytowanego w edytorze graficznym.
Jakościowo skompresowane małe obrazy, mniej niż 200 pikseli wysokości lub szerokości, w przeciwieństwie do edytorów graficznych. Jeśli chcesz, aby rozmiar obrazu w witrynie był mniejszy niż 200 pikseli, lepiej, aby oryginalny rozmiar był większy o 30-50% (260-300 pikseli), aby zaoszczędzić dobra jakość kiedy maleje.
Jednocześnie różnica w szybkości ładowania strony nie będzie odczuwalna, ponieważ małe obrazki zajmują bardzo mało miejsca i jeśli zwiększysz ich rozmiar o 30%, nie zauważysz żadnych zmian. Ale zauważ różnicę w jakości.
Minusy:
Wczytywanie obrazów skompresowanych programowo trwa dłużej, ponieważ zmiana rozmiaru następuje dopiero po pobraniu oryginalnej wersji. Dlatego jeśli rozmiar obrazu jest większy niż 200 pikseli szerokości lub wysokości, lepiej skompresować go w edytorze graficznym, aby strona działała szybciej.
jak zmienić rozmiar obrazu html za pomocą css
Aby zmienić rozmiar obrazu w html css używane są właściwości szerokość (szerokość) i wysokość (wysokość) wewnątrz atrybutu stylu. Możesz wpisać tylko szerokość lub wysokość , a pozostała nieokreślona wartość zmieni się automatycznie, zachowując proporcje obrazu. Na przykład, określając tylko szerokość obrazu za pomocą szerokości, jego wysokość zmieni się automatycznie, zachowując proporcje. I odwrotnie, określając tylko wysokość (wysokość), automatycznie zmieni się również jego szerokość, zachowując proporcje obrazu.
Przykład kodu bez określania wymiarów obrazu
Wynik w przeglądarce
Kod strony
Przykładowy kod ze zmianą rozmiaru obrazu w .css
Wynik w przeglądarce
Kod strony
style="szerokość:150px; ">
Oba powyższe przykłady używają tego samego obrazu o rozmiarze 300x184px (szerokość i wysokość). W 1 przykładzie obraz został wyświetlony w przeglądarce bez zmian w oryginalnym rozmiarze 300x184px, ponieważ szerokość i wysokość nie zostały określone w css. A w drugim przykładzie obraz został wyświetlony w przeglądarce zmniejszony o 2 razy, ponieważ szerokość wynosiła 150 pikseli, wysokość odpowiednio automatycznie zmieniła się na 92 piks. Jak widać, właściwość wysokości może w ogóle nie być określona, ponieważ zmienia się ona automatycznie proporcjonalnie do szerokości.
Jeśli podasz obie opcje: szerokość (szerokość), wysokość (wysokość) i nie będą odpowiadać proporcjom, wtedy obraz będzie miał dokładnie taki rozmiar, ale w formie skompresowanej lub rozciągniętej, w zależności od wartości.
Dlaczego powiększanie zdjęć jest niepożądane
Ważne: zwiększeniu rozmiaru obrazu towarzyszy utrata jakości. Podczas jakiejkolwiek zmiany ważne jest, aby ustawić wartości mniejsze niż na oryginalnym obrazie, czyli tylko zmniejszyć.
Jeśli ustawisz rozmiar piksela na większy niż oryginalny obraz, jakość ulegnie pogorszeniu. A utrata jakości będzie wyraźnie widoczna, bo komputer nie może dodawać nowych pikseli, może tylko powiększać już istniejące. Im większe powiększenie obrazu od wartości oryginalnej, tym gorsza jego jakość i wyraźniejsze kwadratowe piksele.
Aby zmienić rozmiar obrazu za pomocą kodu HTML jako znacznika podane są atrybuty szerokość (szerokość) i wysokość (wysokość). Piksele są używane jako wartość, a argumenty muszą odpowiadać fizycznym wymiarom obrazu. Na przykład na ryc. 10.6 pokazuje obraz o wymiarach 100x111 pikseli.
Ryż. 10.6. obraz w oryginalnym rozmiarze!
W związku z tym kod HTML do umieszczenia tej figury pokazano w przykładzie 10.4.
Przykład 10.4. Wymiary rysunku
Jeśli wymiary obrazu są wyraźnie określone, przeglądarka używa ich do wyświetlania pustego obszaru odpowiadającego obrazowi podczas ładowania dokumentu (ryc. 10.7). W przeciwnym razie przeglądarka czeka na pełne załadowanie obrazu przed zmianą szerokości i wysokości obrazu (rysunek 10.8). W takim przypadku może nastąpić ponowne formatowanie tekstu, ponieważ początkowo rozmiar obrazu nie jest znany i jest automatycznie ustawiany na mały.
Ryż. 10.7. Rozmiar obrazu nie jest określony i nie został jeszcze załadowany
Ryż. 10.8. Obraz przesłany, tekst ponownie sformatowany
Szerokość i wysokość obrazu można zmieniać zarówno w górę, jak i w dół. Nie wpływa to jednak w żaden sposób na prędkość pobierania obrazu, ponieważ rozmiar pliku pozostaje niezmieniony. Dlatego zmniejsz obraz ostrożnie, ponieważ. może to powodować zamieszanie wśród czytelników, dlaczego ładowanie tak małego rysunku trwa tak długo. Jednak zwiększenie rozmiaru prowadzi do odwrotnego efektu - rozmiar obrazu jest duży, ale plik jest ładowany szybciej w stosunku do obrazu o tym samym rozmiarze.
Na ryc. 10.9 pokazuje ten sam obraz, jak pokazano na ryc. 10,6, ale podwojona szerokość i wysokość.
Ryż. 10.9. Widok powiększonego obrazu w przeglądarce
Kod takiego rysunku pozostanie prawie niezmieniony i jest pokazany w przykładzie 10.5.
Przykład 10.5. Zmiana rozmiaru obrazu
Taka zmiana rozmiaru nazywa się resamplingiem, a algorytm przeglądarki jest gorszy w swoich możliwościach od edytorów graficznych. Dlatego konieczne jest zwiększenie obrazu w ten sposób tylko w szczególnych przypadkach, w przeciwnym razie jakość obrazu zbytnio się pogorszy. Lepiej użyć jakiegoś programu graficznego. Wyjątkiem są rysunki zawierające obszary prostokątne. Na ryc. Rysunek 10.10 pokazuje plik wzorca, który zajmuje 54 bajty i ma oryginalny rozmiar 8 na 8 pikseli, przeskalowany do 150 pikseli.
Ryż. 10.10. Powiększony obraz
Przeglądarki wykorzystują dwa algorytmy resamplingu - bicubic (daje gładkie krawędzie i gładką gamę tonalną kolorów) oraz najbliższe punkty (zachowuje oryginalny zestaw kolorów i ostre krawędzie). Najnowsze wersje przeglądarek używają algorytmu bicubic, podczas gdy starsze przeglądarki używają algorytmu najbliższego punktu.
Instrukcja
Najpierw spróbuj znaleźć zdjęcie za pomocą wyszukiwarek. Wprowadź zapytanie, a następnie wybierz kartę ustawień wyszukiwania. Na przykład Google ma przycisk „Narzędzia wyszukiwania”, a Yandex ma ikonę z suwakami. Po tym, jak musisz wybrać element „Rozmiar” i określić dokładne wartości. Lub, na przykład, jeśli potrzebujesz zdjęcia o dobrej rozdzielczości, wybierz „Duże”.
Jeśli nie ma obrazu o pożądanym rozmiarze, można go samodzielnie dopasować do ramy. Są sposoby. Po pierwsze, najpierw tworzysz dokument o żądanym rozmiarze, a następnie zmieniasz obraz. Drugi jest odwrotny - otwórz obraz i zmień rozmiar. Zasadniczo nie ma różnicy: wszystko zależy od twoich preferencji i celów. Przykłady będą rozpatrywane w Adobe Photoshop, ale możesz użyć innych edytorów graficznych.
Pierwszy sposób. Kliknij „Plik” - „Utwórz ...” lub kombinację klawiszy Ctrl + N. Przed tobą pojawi się okno z ustawieniami. Określ tam szerokość, wysokość i wymagane parametry rozdzielczości kolorów. Następnie otwórz obraz, który Ci się podoba w przeglądarce, kliknij prawym przyciskiem myszy i wybierz „Kopiuj obraz”. Następnie wróć do programu i naciśnij kombinację Ctrl + V.
Obraz pojawi się w oknie edytora graficznego. Następnie kliknij „Edycja” - „Swobodne przekształcenie” lub kombinację Ctrl + T. Pojawią się kluczowe punkty, za pomocą których możesz dopasować obraz do rozmiaru okna roboczego. Gdy tylko uzyskasz pożądany wynik (nawiasem mówiąc, możesz wyjść poza granice obszaru roboczego), kliknij „Plik” - „Zapisz jako ...” lub kombinację klawiszy Ctrl + S.
Drugi sposób. Musisz najpierw przejść do komputera, a następnie kliknąć „Plik” - „Otwórz ...” (lub kombinację Ctrl + O) i wybrać żądany obraz. Następnie wybierz „Obraz” - „Rozmiar obrazu ...” lub naciśnij Alt + Ctrl + I. Odznacz „Zachowaj proporcje” i wybierz żądany rozmiar. Następnie naciśnij klawisz OK.
Zdjęcie zostanie przeskalowane do określonego rozmiaru w centymetrach (milimetrach, calach) oraz do określonego rozmiaru w DPI, zgodnie ze standardami drukowania na papierze. Wymiary w cm, mm i calach można określić z dokładnością do tysięcznych, np. zamiast formatu 15x10 można ustawić 15.201x10.203 cm.
Tabela ze standardowymi rozmiarami zdjęć w pozycji pionowej (portretowej):
| Format zdjęć w centymetrach (cm) | Rozmiar w milimetrach (mm) | Rozmiar w pikselach (do druku 300dpi) |
Współczynnik proporcji (w orientacji poziomej) |
| 3x4 (po cięciu ręcznym) | 30x40 | 354x472 | 4:3 (1.33) |
| 3,5x4,5 (po cięciu ręcznym) | 35x45 | 413x531 | 4:3 (1.33) |
| 9x13 | 89x127 | 1063x1535 | 10:7 (1.43) |
| 10x15 | 102x152 | 1181x1772 | 3:2 (1.5) |
| 13x18 | 127x178 | 1535x2126 | 7:5 (1.4) |
| 15x20(≈A5) | 152x203 | 1772x2362 | 4:3 (1.33) |
| 15x21 | 152x216 | 1772x2480 | 4:3 (1.33) |
| 18x24 | 178x240 | 2126x2835 | 19:14 (1.36) |
| 20x25 | 203x254 | 2362x2953 | 5:4 (1.25) |
| 20x30(≈A4) | 203x305 | 2362x3543 | 3:2 (1.5) |
| 30x40 | 305x406 | 3543x4724 | 4:3 (1.33) |
| 30x45 | 305x457 | 3543x5315 | 3:2 (1.5) |
Standardowy rozmiar arkusza papieru Format A4- 21x29,7 cm lub 2480x3508 pikseli przy 300 dpi. Wymiary innych formatów arkuszy można zobaczyć na stronie Wikipedii, ale nie zapominaj, że wymiary są tam podane w milimetrach i calach, tj. w ustawieniach na tej stronie musisz wybrać odpowiednią wartość.
Jeśli chcesz zmienić rozmiar zdjęcia bez uwzględnienia DPI (punktów na cal), to znaczy tylko z zachowaniem proporcji określonego formatu, musisz ustawić w ustawieniach parametr „Rozmiar w DPI” na „0”.
Oryginalny obraz nie jest w żaden sposób zmieniany. Otrzymasz kolejny przetworzony obraz.