Outlook의 비율이 큰 html 이미지

Question

크기가 다른 여러 개의 이미지가 있는데 크기와 크기가 각각 <td> 요소에 CSS 너비와 높이 특성을 사용하여 서로 비례하고 실제 이미지의 너비와 높이가 100입니다. 이 <td> 요소의 %

다음 전자 메일 캠페인에서이 코드를 사용하려고합니다. 문제는이 코드가 예상대로 올바르게 작동하지만 Outlook이 원래 너비와 높이 값으로 이미지를 렌더링하는 것입니다.

아무도 내가 어떻게 이런 일이 일어나지 않도록 할 수 있는지 알고 있습니다.
참고 : 내 코드에서 이미지 src 및 링크를 제거했습니다.

<table width="100%"> <!-- a width 100% container --> 
    <tr> 
     <td></td> <!-- an empty cell, which will adapt its width --> 
     <td width=250 height=300> <!-- it's like max-width:200px --> 
     <a href="SOME LINK"> 
     <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" /> 
     </a> 
     </td> 
     <td></td> <!-- another empty cell, which will adapt its width --> 
    </tr> 
    <tr> 
     <td></td> <!-- an empty cell, which will adapt its width --> 
     <td width=250 height=300> <!-- it's like max-width:200px --> 
    <a href="SOME LINK"> 
      <img width="100%" height= "100%"src="SOME IMAGE LINK" alt="Just for you" title="Just for you" /> 
    </a> 
     </td> 
     <td></td> <!-- another empty cell, which will adapt its width --> 
    </tr> 
</table> 

Answer 1

Outlook이 불안정합니다. 어리석은 WordHTML을 통해 렌더링됩니다.

HTML 속성에 정의 된 값이 없으면 Outlook은 실제 이미지의 전체 너비로 100 %를 봅니다 (데스크톱의 해상도가 이미지의 해상도와 다른 경우에는 더 큰 경우가 있습니다).

<img width="640" height="240" src="SOME IMAGE LINK" style="width:100%; height:100%" /> 

당신은 단지 대체 :

가장 좋은 방법은 바탕 화면의 브레이크 포인트에 도달하면 100 % 너비/높이를 변경하거나, 심지어 wonkier 무언가를 아래와 같이로 설정 미디어 쿼리 중 하나에 있습니다 640 및 240 속성을 사용하여 이미지의 높이와 너비를 지정하십시오. 이것의 뒤에 합리적인 것은 이메일 클라이언트의 대다수가 적절한 폭포를 존중하고 HTML 속성 위에 CSS를 놓는다는 것입니다. 그러나 바보 같은 거위처럼 Outlook은 실제로 100 % CSS를 무시하고 선언 된 HTML 속성을 기반으로 작동합니다.

이제이 메시지는 100 % 확실한 메시지가 아니며 광범위하게 테스트해야합니다.

다른 해결책이 없다면 Outlook에서 표시 할 최대 크기로 원본 이미지의 크기를 실제로 조정하면됩니다.