Wdrażanie responsywnych obrazów o szerokości dynamicznej, wysokości statycznej i świadomym DPR

Dla każdego postu na stronie internetowej będzie wyświetlany obraz nagłówka. Ten obraz będzie miał szerokość 100vw i wysokość 300px. Chciałbym dostarczyć wiele wersji tego obrazu za pomocą atrybutu srcset znacznika img lub pełnoprawnego elementu picture (nie jestem pewien, w którym momencie, stąd to pytanie).Wdrażanie responsywnych obrazów o szerokości dynamicznej, wysokości statycznej i świadomym DPR

byłoby to dość łatwe przy użyciu atrybutu srcset:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

Problem pojawia się gdy chcę wyjaśnić różnych proporcjach pikseli urządzenie. Najpierw przyjmijmy, że mam 2x i 3x wersje wszystkich obrazów wymienionych powyżej w powyższym srcset.

Załóżmy, że mam telefon z 2x z ogólną rzutnią (np. IPhone 5). Chciałbym, aby przeglądarka załadowała xs_2x.jpg. Podobnie, powiedzmy, mam pulpit 1x z monitorem szerokoekranowym. Chciałbym, aby przeglądarka załadowała lg.jpg.

Ale teraz powiedzmy, że mam większy telefon, jeden z szerokim rzutni (tzn. IPhone 6 Plus). W tym przypadku chcę, aby moja przeglądarka ładowała się pod numer sm_3x.jpg. Jednak moja przeglądarka najprawdopodobniej będzie ładować sm_2x.jpg, ponieważ szerokość sm_2x.jpg (1536 pikseli) jest bliższa szerokości telefonu (1242 pikseli) niż szerokość sm_3x.jpg (2304 pikseli). W rezultacie obraz, który nie jest wysoki na urządzeniu, łamie wymagania strony internetowej.

Jak mogę wprowadzić wrażliwe obrazy DPR o dynamicznej szerokości i statycznej wysokości?

Źródło

2015-01-29 Marcus McLean

Czy rozważałeś użycie tagu mediów? – JaeGeeTee

@JaeGeeTee Co masz na myśli znacznikiem medialnym? Zapytanie "@ media" CSS? –

Tak zapytanie @media. Przepraszam, że mam coraz bardziej niechlujny dzień. – JaeGeeTee

background-size: 100% cover;

To powinno zadziałać.

EDYTOWANIE: Prostym powodem, dla którego to zadziała, jest to, że możesz to zrobić tylko w CSS. rozmiar tła pokryje dostępną przestrzeń, zobacz artykuł: http://davidwalsh.name/background-size

Utwórz klasę css: .img-resp { background-size: 100% cover; }, a następnie zastosuj ją do swojego elementu.

Źródło

2015-02-05 17:42:47 Knostradamus

Same bloki kodu nie są zazwyczaj przydatnymi odpowiedziami. Zmodyfikuj odpowiedź i wyjaśnij, co robi wyświetlany kod i dlaczego/jak ten kod odpowiada na pytanie. –

-1

Nie dostałem dokładnie od ciebie wymaganego.

Chcę podać mój kod, aby wypróbować Twoje wymagania. Spróbuj kod:

<!DOCTYPE html> 
    <html lang="en-US"> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Responsive Images</title> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 
     <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"> 
     </script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"> 
     </script> 
    </head> 
    <body> 

     <div class= "container-fluid"> 
     <div class="row"> 

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
    class="img-responsive"> 
      <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> --> 
     </div> 
     </div> 
     </body> 
     </html>

Źródło

2015-02-10 03:04:24 Akilsree1

Należy wziąć pod uwagę, że rozdzielczość obrazu JPEG (DPI) jest bez znaczenia dla ekranów. Najważniejsze tutaj jest całkowita pozioma/pionowa liczba pikseli.

Tak więc wersje 1x, 2x i 3x obrazu (zależnie od szerokości urządzenia!): Device - image size table

Więc 1x monitora i 3x iPhone będzie wymagać tego samego obrazu (1920 x 300 pikseli) i jest to kod w srcset byłoby img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

Uwaga: jeśli jesteś na urządzeniu z szerokość ekranu 320px i jest to wyświetlacz 1x (nie-siatkówkowy), powinieneś użyć obrazu o szerokości 320px.

Ważna jest tutaj tylko całkowita liczba pikseli.

Źródło

2015-02-11 07:41:57

Wdrażanie responsywnych obrazów o szerokości dynamicznej, wysokości statycznej i świadomym DPR

Odpowiedz

Powiązane problemy