워드프레스 응답 이미지 - 망막 화면에서 잘못된 이미지 선택

워드프레스 응답 이미지 - 망막 화면에서 잘못된 이미지 선택

제가 구축하고 있는 이 웹사이트에서 반응이 좋은 이미지를 구현하기 위해 열심히 노력해왔는데, 잘 되고 있다고 생각했을 때, 아이패드 레티나 화면에서 이 이미지를 보고 잘못된 이미지를 선택하고 있습니다.사이즈가 맞지 않을 뿐만 아니라 초상화가 아닌 풍경화로 전시되고 있습니다.다양한 화면 크기에 맞는 맞춤형 이미지 사이즈를 만들고 망막 화면에 사용할 XL 버전도 만들어 놓았는데 왜 이런 일을 하는지 모르겠어요.

srcset과 사이즈가 포함된 이미지의 HTML입니다.

<img class="scene_element scene_element--fadeinup" src="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg" 
srcset="http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017.jpg 3684w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-768x1151.jpg 768w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1010x1514.jpg 1010w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-505x757.jpg 505w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-415x622.jpg 415w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-720x1080.jpg 720w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-360x540.jpg 360w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-293x440.jpg 293w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1110x800.jpg 1110w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-455x306.jpg 455w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-355x238.jpg 355w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-640x600.jpg 640w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-320x300.jpg 320w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-2340x1258.jpg 2340w,
 http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1170x629.jpg 1170w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-940x627.jpg 940w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-555x400.jpg 555w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1910x1274.jpg 1910w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-955x637.jpg 955w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-1574x1250.jpg 1574w, 
http://localhost:8888/wp-content/uploads/2017/11/Westfield-House-049-March-2017-787x625.jpg 787w" 


sizes="(-webkit-min-device-pixel-ratio: 1.5) 1010px, 
(max-width: 767px) 767px, (min-width: 768px) and (max-width: 991px) 415px, 
(min-width: 992px) and (max-width: 1199px) 415px, 
(min-width:1200px) 505px, 505px" itemprop="thumbnail" alt="Image description" >

레티나 스크린이 이중 픽셀이기 때문에 저는 처음에 아이패드를 대상으로 하기 위해 이것을 크기에 추가하려고 시도했지만 아무 일도 일어나지 않았습니다.

(min-width: 2048px) 1010px 

재미있는 것은 제가 1010px 크기의 이미지를 가지고 있고 이 이미지를 사용하기 위해 픽셀을 두 배로 늘릴 때의 크기를 지정했다는 것입니다.대신 이 사이즈를 사용합니다: 940x627.jpg

누가 왜 이런 일이 일어나는지 설명해 줄 수 있나요?

여러분, 페이지가 올바른 이미지를 로드하지 않는 이유를 간신히 찾았습니다.제 질문에서 언급했듯이 워드프레스는 기본적으로 동일한 종횡비를 가진 srcset의 이미지만 로드합니다.로 사용자 하려면 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ,wp_calculate_image_srcset기능.

이렇게 하면 모든 사용자 지정 크기가 모든 이미지 srcset에 로드되고 브라우저가 가장 가까운 너비와 비율을 기준으로 이미지를 선택한다는 문제점이 있습니다.

둘째, 워드프레스가 가로 세로 비율을 기준으로 하는 이미지는 페이지에 로드하는 커스텀 사이즈가 아닌 원래 이미지 사이즈라는 것을 깨달았습니다.그래서 나는 맞춤 사이즈가 있는 초상화 이미지를 가지고 있었습니다.add_image_size('portrait-case-study-lg', 505, 757, true);워드프레스는 원래 파일의 가로 세로 비율(2000pxx1500px)을 가져왔습니다.이 비율이 다르기 때문에 세로 크기에 대해 생성한 이미지 크기는 무시되고 대신 가로 세로 비율이 가장 가까운 이미지를 선택했습니다.

을 고친 은 가 은 이었습니다 하는 을 이었습니다 하는 가 을 은 wp_calculate_image_srcset크기를 srcset에 추가하고 대신 포토샵의 원래 이미지를 작은 이미지와 동일한 가로 세로 비율로 크기를 조정했습니다.

예를 들어, 사용자 지정 이미지 크기 대신portrait-case-study-xl원본 이미지 파일을 자르는 데 사용되었습니다.저는 이것을 제거하고 원래 이미지를 이 크기로 올렸습니다.

add_image_size('portrait-case-study-xl', 1010, 1514, true);
add_image_size('portrait-case-study-lg', 505, 757, true);

이는 이제 Wordpress가 '를 선택함을 의미합니다.portrait-case-study-lg'가로 세로 비율이 원본과 동일하여 화면 크기가 다릅니다.

클라이언트가 이미지를 페이지에 업로드할 때 자동으로 올바른 크기를 만들 수 없다는 의미이므로 워드프레스를 통해 srcset에서 원래 이미지를 제거할 수 있다면 좋을 것입니다.

언급URL : https://stackoverflow.com/questions/47392873/wordpress-responsive-images-selecting-wrong-image-on-retina-screens