Obraz responsywny to taki, który potrafi dostosować się do różnych urządzeń, niezależnie od wielkości ekranu. Posiadanie responsywnego obrazu na stronie internetowej stało się obecnie niezwykle istotne. Ponieważ nie tylko przyspiesza działanie witryny, ale także zapewnia wygodę użytkowania na wszystkich urządzeniach. Rozmiar responsywnych obrazów również zostanie zmieniony poprzez zmianę rozmiaru przeglądarki.
Responsywne obrazy skutecznie dopasowują się do różnych rozmiarów ekranów na różnych urządzeniach. Zapewnia utrzymanie jakości. Responsywna strona internetowa z responsywnymi obrazami z pewnością zwiększa zaangażowanie i współczynnik konwersji. Obrazy można dostosować do responsywności za pomocą CSS wraz z zapytaniami o media.
W tym artykule wykorzystamy HTML i CSS, aby obrazy były responsywne.
Jak sprawić, by obrazy były responsywne za pomocą HTML i CSS?
Aby obrazy były responsywne przy użyciu HTML i CSS, wykonaj poniższe kroki:
Metoda 1: Użyj właściwości „max-width”.
Pierwszą metodą zapewnienia responsywności obrazu jest użycie opcji „ maksymalna szerokość ' nieruchomość. „ maksymalna szerokość ” służy do określenia maksymalnej szerokości obrazu. W przypadku, gdy zawartość przekracza maksymalną szerokość, zmieni się wysokość elementu.
Utwórz HTML
Aby dodać plik obrazu do tagu
HTML, użytkownicy muszą użyć taguDodaj CSS
Teraz utwórz zewnętrzny plik CSS, zapisz go z rozszerzeniem „. css ” i połącz je w znaczniku
pliku HTML. Aby nadać styl plikowi obrazu w pliku CSS, zacznij od tagu img i otwórz nawiasy klamrowe. Następnie wewnątrz nawiasu klamrowego dodaj „ maksymalna szerokość: 100% ;” aby dopasować obraz poziomo do kontenera. Co więcej, zapobiegnie to obcinaniu obrazów. Następnie dodaj „ wysokość: automatyczna ;” aby automatycznie dostosować wysokość, aby obraz był wyświetlany poprawnie:obraz {
maksymalna szerokość : 100% ;
wysokość : automatyczny ;
}
Zmień rozmiar okna przeglądarki, aby sprawdzić, jak skaluje się obraz.
Metoda 2: Użyj właściwości „szerokość”.
Inną metodą zapewnienia responsywności obrazu jest użycie właściwości „ szerokość ”. Własność ' szerokość ” określa szerokość obrazów i tekstu. Nie zawiera marginesów, wypełnienia ani obramowań. Może ustawić rozmiar obrazów i tekstu w postaci cm, px lub%. Aby obraz był responsywny, po prostu przypisz „ szerokość „właściwość do” 100 %”. Ustawienie ' szerokość: 100% ;” oznacza, że obraz jest tak duży jak element nadrzędny:
obraz {szerokość : 100% ;
wysokość : automatyczny ; }
Powyższe potwierdza, że obraz jest responsywny. Aby sprawdzić, czy jest responsywna, po prostu zmień rozmiar okna przeglądarki.
Metoda 3: Zastosuj zapytania o media
Zapytania o media CSS pomagają użytkownikom modyfikować wygląd strony internetowej. Zapytanie o media CSS zawiera warunki. Za każdym razem, gdy te warunki zostaną spełnione, zmieni się wygląd urządzenia lub przeglądarki. Zapytania o media mogą również pomóc użytkownikom w dostosowaniu obrazów do responsywności. Z tego powodu najpierw określ „@ głoska bezdźwięczna ”, a następnie określ znacznik „ maksymalna szerokość ” i przypisz maksymalną szerokość obrazu w nawiasach klamrowych. Ilekroć ten warunek zostanie spełniony, obraz zacznie reagować. Następnie dodaj nawiasy klamrowe, określ znacznik img i określ „ szerokość: 100% ;” wartość:
@głoska bezdźwięczna ( maksymalna szerokość : 480 pikseli ) {obraz {
szerokość : 100% ;
}
}
Notatka : obraz będzie responsywny tylko wtedy, gdy spełni określony warunek.
Zastosowano zapytanie o media CSS i teraz obraz będzie zachowywał się tak samo responsywnie, jeśli jego rozmiar zostanie zmieniony do określonego rozmiaru obrazu. W przeciwnym razie nie będzie odpowiadać:
Wniosek
Aby obrazy były responsywne za pomocą HTML i CSS, użytkownicy mają różne metody. Metody te obejmują dostosowywanie obrazów do responsywności za pomocą „ maksymalna szerokość ' nieruchomość, ' szerokość ”, a także poprzez zastosowanie zapytania o media CSS. W tym artykule przedstawiono użytkownikom kompletne rozwiązanie umożliwiające responsywność obrazów.