2016-09-27 4 views
0

WordPress 게시물에이 HTML 태그가 있습니다. 렌더링WordPress 모바일 장치 용 이미지 크기 조정

<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg" width="650" height="433" /> 

내가 PC의 모든의 브라우저에서 페이지를 볼 때 괜찮

<img class="size-full wp-image-761" src="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg" width="650" height="433" srcset="http://domain.cloudfront.net/wp-content/uploads/2016/09/couple.jpg 650w, http://d14x51nv4ivcb0.cloudfront.net/wp-content/uploads/2016/09/couple-300x200.jpg 300w" sizes="(max-width: 650px) 100vw, 650px"> 

생산,하지만 난 내 휴대 전화에서 페이지를 볼 때 올바르지 않습니다. 이미지가 화면에 비해 너무 커서 이미지의 왼쪽 부분 만 보았고 페이지를 오른쪽으로 이동하여 나머지 이미지를 볼 수 없습니다.

여러 장치에서 볼 때 이미지 크기를 조정하려면 어떻게해야합니까?

답변

0

이 시도 :

<img class="size-full wp-image-761" src="http://domain.com/wp-content/uploads/2016/09/couple.jpg" width="100%"/> 

난 그냥 100%width 속성을 변경했습니다.

+0

이에 다음과 CSS를 추가 할 수 있습니다. 렌더링 된 HTML의 srcset 속성과 관련이 있다고 생각합니다. – andrewb

+0

브라우저에서 모바일 모드로 이동하고 요소를 검사 한 다음 다른 속성을 제거하십시오. – Fralec

0

이 코드를 functions.php에 추가합니다. 이미지를 추가하여 콘텐츠를 게시 할 때 이미지의 너비 높이 속성을 제거합니다.

add_filter('post_thumbnail_html', 'remove_thumbnail_dimensions', 10, 3); 
add_filter('image_send_to_editor', 'remove_thumbnail_dimensions', 10, 3); 
function remove_thumbnail_dimensions($html, $post_id, $post_image_id) { 
    $html = preg_replace('/(width|height)=\"\d*\"\s/', "", $html); 
    return $html; 
} 

이제 출력을 변경하지 않는있는 style.css 파일

img{ 
    max-width:100%; 
    height:auto; 
}