2014-06-25 5 views
0

이미지 테두리를 제외하고 반응 형 전자 메일 템플릿을 만들려고했습니다. 제대로 작동합니다. 이미지 및 미디어 스타일에 테두리를 설정합니다.하지만 작은 화면에서 이미지 테두리가 잘립니다.뉴스 레터 경계 오류

HTML

 <html> 
     <head> 
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> 
<style type="text/css"> 
@media only screen and (max-width: 480px) { 
.message_mobile { 
    width: 100% !important; 
    } 
    } 
</style> 
</head> 
<body id="message_body" style="background-color:white;" > 
    <table style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 600px; display: table;" align="center" class="message_mobile"><tbody><tr> 
      <td align="left" valign="top"> 
     <table cellpadding="0" cellspacing="0" style="border: 0px; border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: hidden;"> 
       <tbody><tr> 
        <td style="vertical-align:top;text-align:center;"> 
         <div> 
         <img src="http://www.myfico.com/Images/sample_overlay.gif" alt=" " style="border: 16px solid rgb(196, 45, 196); display: block; width: 100%; padding: 2px; max-width: 94.64882943143813%;" width="auto"> 
        </div> 
        </td> 
       </tr> 
      </tbody></table> 
     </td> 
     </tr> 
    </tbody> 
</table> 
</body> 
</html> 

출력 (대형 화면) enter image description here

출력 (작은 화면)

enter image description here

Fiddle Demo

+0

왜 이미지 폭을 약간 더 작게 만들지 말아야합니까? 즉 90 %; ? 이미지 너비가 너비 + 테두리 폭 따라서 최종 너비> 100 % – user2211216

+0

@ user2211216 우리는 너비를 줄일 수 있습니다. 너비는 응답 성이 필요합니다. – Shin

+0

너는 이것을 잘 설정하면 응답이 우수하다. – user2211216

답변

1

이 상대적으로 새 속성, 모든 브라우저 (특히 이메일 클라이언트)를 지원할 수있다 그러나 때문에, border-boxbox-sizing을 설정할 수 있습니다.

+0

모바일 브라우저에서 지원됩니까? 알고 계십니까? – Shin

+0

내 대답과 http://caniuse.com/#feat=css3-boxsizing에서 MDN 링크를 확인하십시오. 둘 다 broswers가 지원하는 정보가 있습니다. – RoToRa