Obrazy adaptacyjne lub obrazy responsywne to kombinacja metod ładowania odpowiednich obrazów w zależności od rozmiaru ekranu lub urządzenia. Obrazy adaptacyjne są automatycznie dostosowywane do różnych rozmiarów ekranów i urządzeń. Obrazy adaptacyjne wymagają stworzenia innego układu dla każdego urządzenia, na którym będzie można uzyskać dostęp do strony internetowej. Obrazy adaptacyjne można łatwo tworzyć za pomocą CSS Flexbox. Flexbox to jednowymiarowy model układu CSS, który tworzy wiersze lub kolumny. Flexbox ułatwia tworzenie responsywnej struktury.
W tym poście znajdziesz wskazówki dotyczące tworzenia obrazów adaptacyjnych za pomocą CSS Flexbox.
Jak tworzyć obrazy adaptacyjne za pomocą CSS Flexbox?
Aby utworzyć obrazy adaptacyjne za pomocą CSS Flexbox, użytkownicy muszą najpierw utworzyć strukturę HTML, a następnie zastosować CSS. Aby przeprowadzić praktyczną demonstrację, wykonaj poniższe procedury.
Utwórz strukturę HTML
Stwórz Najpierw utwórz Flexbox, ustawiając „ wyświetlacz ”wartość właściwości do” przewód ' w środku ' pojemnik na obrazy ” Następnie zastosuj CSS do obrazów, określając „ obraz ' razem z ' .images-container ' nazwa. Najpierw ustaw „ przewód ”wartość właściwości do” 1 ”, aby równomiernie rozdzielić dostępną przestrzeń między obrazami. Następnie ustaw opcję „ maksymalna szerokość ”wartość właściwości do” 100% ”, aby upewnić się, że obrazy nie przekraczają oryginalnej szerokości. Ustaw ' wysokość ”wartość właściwości do” automatyczny ”, aby zachować proporcje. Na koniec dodaj odstępy między obrazami, ustawiając opcję „ margines ”wartość właściwości do” 10 pikseli ”: Obrazy adaptacyjne przy użyciu CSS Flexbox zostały pomyślnie utworzone. Poniższy widok wyjściowy znajduje się przed zawinięciem okna przeglądarki: Teraz zawińmy okno przeglądarki i sprawdźmy czy obraz jest adaptacyjny: Aby utworzyć obrazy adaptacyjne za pomocą CSS Flexbox, użytkownik musi najpierw utworzyć strukturę HTML, a następnie zdefiniować etykietka. Wewnątrz
dodaj „ źródło ”, aby określić ścieżkę obrazu i dodać alternatywny obraz za pomocą znacznika „ wszystko ”znacznik:
< div klasa = „kontener obrazów” >
< obraz źródło = „obraz-1.jpg” wszystko = „Pierwszy obraz” >
< obraz źródło = „obraz-2.jpg” wszystko = „Drugi obraz” >
div >
Zastosuj CSS
wyświetlacz: przewód ;
owinięcie elastyczne: owinięcie;
}
.images-container img {
przewód: 1 ;
maksymalna szerokość: 100 % ;
wysokość: automatyczna;
margines: 10px;
}
Przed owinięciem 
Po zawinięciu 
Powyższy obraz potwierdza, że dodane obrazy mają charakter adaptacyjny. Wniosek
etykietka. Następnie zastosuj CSS i wewnątrz CSS ustaw właściwość „display” na „ przewód ” w celu stworzenia Flexboxa. W tym artykule zaprezentowano kompleksowy przewodnik po tworzeniu obrazów adaptacyjnych za pomocą CSS Flexbox.