Zmiana zmiany rozmiaru obrazu bootstrap

Obrazy są popularnymi komponentami projektowymi dowolnej aplikacji. Ulepszają wyświetlanie aplikacji i sprawiają, że są atrakcyjne. Bootstrap oferuje wiele klas, które zapewniają elementom kilka funkcji. Mówiąc dokładniej, „IMG-Fluid”Jest jedną z tych klas, które zapewniają reakcję na obrazy.

Ten zapis będzie opisany:

• Jak zmienić rozmiar obrazu za pomocą bootstrap?
• Jak zobaczyć rozmiar obrazu na różnych ekranach?

Jak zmienić rozmiar obrazu za pomocą bootstrap?

„„IMG-Fluid„Klasa jest wykorzystywana do reakcji obrazu. Responsywne obrazy to te, które automatycznie zmieniają rozmiar w zależności od rozmiarów ekranu. Klasa „IMG-Fluid” ma predefiniowane właściwości CSS ”maksymalna szerokość”Z wartością„100%" I "wysokość”Z wartością„automatyczny".

Sprawdź przykład, aby zrozumieć określoną koncepcję.

Html

Dodaj HTML "„Element z atrybutami„ src ”,„ klasa ”i„ alt ”, gdzie:

• "src”Atrybut ustawia ścieżkę obrazu.
• "klasa”Jest ustawiony na klasę„ IMG-Fluid ”, aby reagować.
• "Alt”Określa alternatywny tekst, który zostanie wyświetlony, jeśli obraz nie może załadować:

Jak widać, obraz responsywny został pomyślnie utworzony:

Jak zobaczyć rozmiar obrazu na różnych ekranach?

Na stronie internetowej kliknij prawym przyciskiem myszy i wybierz „Sprawdzać" opcja. W rezultacie okno narzędzia programistów otworzy się, skąd musisz kliknąć „Przełącz pasek narzędzi urządzenia" funkcja:

Następnie kliknij „Wymiary: responsywny" opcja. Pojawi się menu rozwijane. Wybierz opcje i zobacz, jak obraz będzie wyglądał na tym konkretnym urządzeniu:

W ten sposób obrazy można zmienić za pomocą bootstrap.

Wniosek

Bootstrap „IMG-Fluid„Klasa jest wykorzystywana do reakcji obrazów. Ta klasa ma predefiniowane CSS ”maksymalna szerokość„Własność o wartości”100%" I "wysokość”Z wartością„automatyczny". Aby obraz można zmienić według rozmiarów ekranu, najpierw dodaj obraz za pomocą elementu „” i skojarz klasę „IMG-Fluid”. Ten zapis pokazał, jak zmienić rozmiar obrazu za pomocą bootstrap.