Skalowanie obrazów Bootstrap Skalowanie

Question

Używanie Twitter Bootstrap Rozumiem, że domyślnie skaluje obrazy w sposób responsywny. To jest świetne, ale nie zawsze jest doskonałe.

Załóżmy na przykład, że mam obraz 500x300 na komputerze, a następnie zmieniam jego rozmiar na komórkę, który będzie naprawdę mały i niezbyt wysoki, zrzucając wiele szczegółowych części obrazu.

Widziałem, jak inne witryny nie skalują obrazu, ale raczej użyj rodzica div, aby sortować obraz. (http://www.fitnessfireworks.com był doskonałym tego przykładem, nie jest już dostępny.)

Jaka jest najlepsza metoda, aby to osiągnąć? Kombinacja skalowania obrazu tła i obrazu tła w postaci CSS? Po prostu szukam najlepszych praktyk.

Answer 1

Jeśli ważna jest jakość obrazu, użyłbym dwóch obrazów z różnymi deklaracjami klas. Zewnętrzne narzędzia zawsze będą lepiej skalować obrazy niż przeglądarka robiąca to w locie.

Answer 2

Przydatny może być artykuł this. Wyjaśnia temat optymalizacji obrazów dla reagującego wyświetlacza i uniknięcie wielu pobrań

Answer 3

Widziałem, jak inne strony faktycznie nie skalują obraz dużo, ale raczej użyć div do sortowania maskować obraz

Jeśli zbadać CSS na stronie można wymienić, widać, że zamiast używać imline obrazów, są one zazwyczaj określających div z obrazów tła oraz korzystanie CSS jak

#some-div { 
background-size: 100%; 
background-size: cover; 
background-position: center center; 
vertical-align: top; 
background-image: url(/.../image.jpg); 
} 

Oto przykład, w jaki sposób uzyskać zupełnie inne wyniki dzięki skalowaniu obrazu wbudowanego w stosunku do background-image.

http://www.bootply.com/67094

Klucz z drugą metodą jest użycie t-size: pokrywę i manipulowania wielkości div (a więc wielkość tła zdjęcia).

http://css-tricks.com/perfect-full-page-background-image/ ma dobrą informację o odmianach i opcjach z background-cover.