Jak zmienić rozmiar obrazu w css na html. Zmiana rozmiaru zdjęcia w centymetrach do drukowania na papierze, biorąc pod uwagę DPI online Jak ustawić określony rozmiar zdjęcia

Zdjęcie zostanie przeskalowane zgodnie z określonym rozmiarem w centymetrach (milimetrach, calach), a także określonym rozmiarem 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):

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ędniania DPI (punktów na cal), to znaczy tylko z zachowaniem proporcji określonego formatu, musisz ustawić parametr „Rozmiar w DPI” na „0” w ustawieniach.

Oryginalny obraz nie jest w żaden sposób zmieniany. Otrzymasz kolejny przetworzony obraz.

Obrazy są składnikami prawie każdej witryny, więc zmiana rozmiaru jest niezbędna. Możesz zmienić rozmiar obrazka na 2 sposoby: w edytorze graficznym lub programowo w kodzie html na css .

Jeśli nie ustawisz rozmiaru obrazka w kodzie css na html, to jego wysokość i szerokość na stronie będzie taka sama w pikselach jak oryginalny plik. 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 ładuje się szybciej, ponieważ nie trzeba pobierać dodatkowych danych (pikseli), które następnie zostaną programowo skompresowane.

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 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 zmniejszania obrazu jest zwykle używana dla wygody. Przykładowo, gdy jeden obrazek może mieć wiele różnych rozmiarów, często wygodniej jest zmienić wartości tego samego w sposób programowy, 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 Twoja witryna zawierała obraz mniejszy niż 200 pikseli, najlepiej jest mieć oryginalny rozmiar większy o 30-50% (260-300 pikseli), aby zachować dobrą jakość podczas zmniejszania rozmiaru.

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.

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 za pomocą właściwości css są używane 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 był wyświetlany 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 2 razy, ponieważ szerokość została określona jako 150px, wysokość została automatycznie zmieniona 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 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 jedynie powiększać już istniejące. Im większe powiększenie obrazu od pierwotnej wartości, tym gorsza jego jakość i wyraźniejsze kwadratowe piksele.

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 w 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. Podaj 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.

Nie wiesz jak powiększyć obrazek? Jest to bardzo proste zadanie, ponieważ wszystko, czego potrzebujesz, jest już zainstalowane na twoim komputerze. Przeczytaj ten przewodnik, a dowiesz się, jak zmienić rozmiar zdjęcia za pomocą 5 prostych narzędzi.

Metoda 1: Jak zmienić rozmiar obrazu w programie Microsoft Paint

1. Znajdź i uruchom MS Paint. Jest preinstalowany we wszystkich wersjach systemu operacyjnego Okna. Start > Wszystkie programy > Akcesoria > Farba:

1. Przeciągnij obraz do okna Paint lub użyj Menu > Otwórz (Ctrl+O).
2. W menu głównym programu znajdź element „ Zmień rozmiar„I wybierz:

1. Otworzy się panel zmiany rozmiaru i proporcji obrazu. Możesz określić wartość w pikselach. Nie zapomnij zaznaczyć pola " zachowaj proporcje”. W przeciwnym razie obraz zostanie zdeformowany:

1. Aby zwiększyć rozmiar zdjęcia, kliknij przycisk OK i zapisz zdjęcie.

Rada:

• Jeśli nie możesz zmienić rozmiaru zdjęcia bez jego rozciągania, możesz użyć narzędzia Kadrowanie, aby usunąć niechciane krawędzie. Jak to zrobić opisano w paragrafie 3;
• Aby szybciej otworzyć zdjęcie, kliknij je prawym przyciskiem myszy i wybierz „ Otwórz za pomocą farby»;
• Obraz najlepiej zapisać w tym samym formacie, co oryginał.

Metoda 2. Jak zmienić rozmiar obrazu w Galerii zdjęć MS?

1. Jeśli Microsoft Photo Gallery nie jest zainstalowany na twoim komputerze ( Start > Galeria zdjęć), musisz go pobrać i zainstalować jako część Windows Essentials 2012 ;
2. Uruchom MS Photo Gallery i znajdź swój plik graficzny;
3. Kliknij go prawym przyciskiem myszy i wybierz "Zmień rozmiar...":

1. Wybierz ustawienie wstępne: " Małe 640 pikseli”, „Średni 1024”, „Duży 1280” itp.

1. Kliknij " Zmień rozmiar i zapisz”. Po zwiększeniu rozmiaru obrazu obraz zostanie umieszczony w tym samym folderze, oryginał również w nim pozostanie.

Rada:

• Jeśli chcesz ustawić dokładny rozmiar obrazu, w rozwijanym menu wybierz „ Zwyczaj» i ustaw rozmiar większego boku zdjęcia;
• Aby zmienić rozmiar wielu zdjęć jednocześnie, zaznacz je, przytrzymując klawisz Ctrl.

Metoda 3. Jak zmienić rozmiar obrazu w Photoscape?

Możesz zmienić rozmiar obrazu w Photoshopie. Lub użyj do tego Photoscape.

1. Pobierz Photoscape i zainstaluj go. Uruchom program;
2. Przejdź do zakładki „Edytor” i znajdź zdjęcie, które chcesz edytować:

1. U dołu obrazu znajduje się przycisk „ Zmień rozmiar”, kliknij go.
2. Ustaw nowy rozmiar zdjęcia. Upewnij się, że opcja „ Zachowaj proporcje jest włączona i naciśnij przycisk OK:

1. Zapisz edytowany obraz.

Rada:

• Jeśli chcesz zmienić rozmiar wielu obrazów, użyj „ Edytor wsadowy”. Dodaj folder i zmień rozmiar wszystkich znajdujących się w nim zdjęć;
• Jeśli nie znasz dokładnego rozmiaru, możesz ustawić „Procent” oryginalnego rozmiaru.

Metoda 4. Jak zmienić rozmiar obrazu w IrfanView?

1. Zainstaluj IrfanView - doskonałe narzędzie do przeglądania i zwiększania rozmiaru obrazu;
2. Dodaj zdjęcie, przeciągając je do okna programu lub klikając pierwszy przycisk na pasku narzędzi:

1. Przejdź do zakładki "Obraz", wybierz " Zmień rozmiar/proporcję» ( Ctrl+R);
2. Ustaw nowy rozmiar w pikselach, centymetrach, calach lub jako procent oryginalnego obrazu:

1. Zapisz obraz.

Rada:

• Możesz użyć standardowych rozmiarów: 640 na 480 pikseli, 800 na 600 pikseli, 1024 na 768 pikseli itd.;
• Aby zachować wysoką jakość zdjęć, upewnij się, że ustawienie DPI wynosi co najmniej 300.

Metoda 5. Jak zmienić rozmiar obrazu online?

1. Aby zwiększyć rozmiar obrazu online, przejdź do witryny PicResize.
2. Naciśnij przycisk Przeglądaj”, aby wybrać zdjęcie. Kliknij " Kontyntynuj»:

1. Wybierz procent oryginalnego obrazu, np. 50% mniejszy. Narzędzie wyświetli rozmiar obrazu wyjściowego. Alternatywnie możesz wprowadzić dokładny rozmiar, wybierając „ niestandardowy rozmiar»:

Aby zmienić rozmiar obrazu za pomocą 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 iw dół. Nie wpływa to jednak w żaden sposób na prędkość pobierania obrazu, ponieważ rozmiar pliku pozostaje niezmieniony. Dlatego należy ostrożnie zmniejszać obraz, 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ą) i 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.