Cách giữ kích thước hình ảnh trong các mẫu Mailchimp

Question

Tôi đang tạo mẫu trong Mailchimp để gửi các bản tin. Mẫu chứa phần có thể lặp lại với hình ảnh có kích thước tiền tố. Vì một lý do nào đó, nó chèn các giá trị width = "" và height = "" từ phần tử img và chỉ bao gồm chúng nếu bạn đặt thủ công các giá trị này trong cài đặt hình ảnh cho mỗi hình ảnh. Điều này có nghĩa là nếu người dùng tải lên hình ảnh có kích thước khác và không nhập đúng kích thước thì trong Outlook, hình ảnh sẽ hiển thị ở kích thước đầy đủ.

Để làm cho nó thân thiện với người dùng hơn trên trình chỉnh sửa thiết kế, nó sử dụng kiểu chiều rộng/chiều cao css để hiển thị kích thước hình ảnh, vì vậy nó nói (ví dụ) rộng 350px cao 234px và bạn có thể tải lên lớn hơn nhiều hình ảnh và nó cho thấy nó ở độ rộng 350px (mà sẽ làm cho một người dùng nghĩ rằng nó là chính xác). Tuy nhiên, nó không bao gồm các giá trị chiều rộng/chiều cao html img trừ khi bạn chỉ định chúng theo cách thủ công có nghĩa là kích thước hình ảnh không đúng trong Outlook.

Có ai biết dù sao để ép buộc ít nhất biến chiều rộng html được tự động đưa vào phần tử img không? Nếu không, người dùng phải tự đặt cùng chiều rộng/chiều cao cho từng hình ảnh theo cách thủ công và nếu họ quên thì nó sẽ không hiển thị chính xác trong Outlook?

Cảm ơn,

Dave

Answer 1

Đối với những người khác tham khảo bây giờ tôi đã nói chuyện với MailChimp và sử dụng một sự kết hợp của mã tại https://www.snip2code.com/Snippet/25348/HTML-Email-Template--max-width-hack-for- (dưới đây) và max-width/max-height giá trị css cho các bản sửa lỗi img các vấn đề trong quan điểm:

<!--[if (gte mso 9)|(IE)]> 
<center> 
    <table> 
    <tr> 
     <td width="600"> 
     <![endif]--> 
     <div style="max-width: 600px; margin: 0 auto;"> 
      <p>This text will be centered and constrained to 600 pixels even on Outlook which does not support max-width CSS</p> 
     </div> 
     <!--[if mso]> 
     </td> 
    </tr> 
    </table> 
</center> 
<![endif]--> 

Answer 2

Để khắc phục vấn đề này, bạn phải có một max-width xác định trên hình ảnh thực tế bản thân, và chắc chắn rằng nó inlined vào thẻ như thế này:

<img mc:edit="image" src="image.jpg" width="200" style="max-width:200px;"> 

Nó không được tính nếu nó được bao gồm trong CSS trong phần đầu.

Với đánh dấu phía trên trình soạn thảo MailChimp, hãy thêm chiều rộng = "200" SAU người dùng chỉnh sửa hình ảnh. Nhưng nếu người dùng không chỉnh sửa hình ảnh, thật đáng buồn là không có chiều rộng nào được thêm vào vì vậy các bản sửa lỗi ở trên sẽ đáng để thử.