skalowanie obrazu z CSS

ja właściwie nie trzeba go teraz, ale po prostu z ciekawości ...skalowanie obrazu z CSS

Załóżmy, że mamy płyn internetowej układ, który działa doskonale na 1920px i na małych wyświetlaczach smartfonów. Teraz powiedzmy, że mamy tam obrazy i oczywiście (oczywiście?) Chcemy je skalować. Przesłaliśmy 2560px obrazów na serwer (ponieważ kogo obchodzi obecnie przepustowość) i ustawiamy właściwość width: 100% na znacznik img.

Mamy więc dwóch użytkowników: programistę z wyświetlaczem 1920px, nazwijmy go Jo i studentką ze smartfonem, nazwijmy ją Nancy (bo wszystko jest lepsze z Nancy, prawda?).

Jo i Nancy są zadowoleni, ponieważ nasz plan ze skalowaniem obrazów przy użyciu width: 100% działa, ale co, jeśli zdecydowaliśmy się pokazać również małe obrazy o szerokości 400 pikseli? Nancy niczego nie zauważy, ale dla Jo to byłaby katastrofa.

Pytanie brzmi: czy możemy sprawić Jo i Nancy radość bez używania JavaScript?

Źródło

2012-01-09 Daniel J F

Co kwalifikuje się jako uszczęśliwiające? Również wyświetlanie zdjęć na smartfonach w rozdzielczości 2560px jest okropnym pomysłem. –

Będą szczęśliwi, jeśli nasz obraz zostanie skalowany na smartfonie Nancy, a Jo zobaczy obraz 400 pikseli bez skalowania. –

Czy masz na myśli, że ustawiłeś atrybut szerokości obrazu na 100%, jak w ''? – MrMisterMan

Zamiast tego zamiast wybrać ?

Spowoduje to pozostawienie wszystkich obrazów, które są mniejsze niż szerokość samego ekranu, a te, które są szersze niż ekran, zostaną zmienione na zbyt 100%. Problem rozwiązany, wszyscy są szczęśliwi!

Źródło

2012-01-09 15:28:49 Filip

To zdecydowanie tradycyjny sposób robienia zdjęć w responsywnym projektowaniu stron internetowych. –

Ponieważ byłoby to zbyt łatwe, oczywiście! Właściwie, odpowiedziałeś na moje pytanie, nigdy nie używałem 'max-width' z obrazami, ale próbowałem teraz i działa dobrze. Dzięki. –

Dodam, że wydaje się, że trzeba dodać 'height: auto' do obrazów, aby zapobiec przekrzywieniu współczynników kształtu (przynajmniej w przeglądarce mobilnej, której teraz używam ...) –

Jeśli chcesz wysyłać różne zdjęcia do różnych ekranów na podstawie ich szerokości, powinieneś zagłębić się w te warunkowe zapytania o media, o których słyszymy.
Jest to miłe www: http://webdesignerwall.com/tutorials/css3-media-queries

Źródło

2012-01-09 15:41:38

Dzięki, używam ich już prawie wszędzie. Pomyślałem tylko, co by było, gdyby nie było sytuacji, w której nie będę mógł użyć różnych zdjęć. –

użyłem max-width: 100% jak Filip wspomniał, ale Musiałem także zawierać:

height:auto

przeciwnym wypadku wysokość nie skalować.

Źródło

2014-05-08 17:56:59 ContextSwitch

skalowanie obrazu z CSS

Odpowiedz

Powiązane problemy