Cách tạo hình ảnh phản hồi trong email HTML bất kể kích thước hình ảnh

Question

Tôi đang tạo mẫu email nơi vùng chứa của tôi có chiều rộng tối đa: 600px. Tôi muốn có thể tải lên các hình ảnh có chiều rộng vượt quá 800px và các hình ảnh được chia tỷ lệ để duy trì tỷ lệ khung hình dự kiến ​​của chúng. Vì vậy, ngay cả khi tôi tải lên một hình ảnh rộng 800px, nó sẽ mở rộng đến 600px.

Trong Outlook, tôi không nghĩ rằng nó hỗ trợ độ rộng tối đa cho hình ảnh do đó làm cho nó giãn ra.

Có giải pháp nào cho vấn đề này không?

Answer 1

Có và không. Outlook có xu hướng ép hình ảnh đến kích thước thực của nó, bất kể CSS và HTML sizings của bạn. Vì vậy, sử dụng hình ảnh lớn hơn những gì bạn muốn hiển thị trên phiên bản máy tính để bàn của bạn có khả năng phá vỡ trên Outlook.

Đặt cược tốt nhất của bạn cho hình ảnh phản hồi sẽ có hình ảnh dưới dạng chiều rộng 100% bên trong bảng có độ rộng tối đa được đặt. Sau đó, quanh bảng này, hãy tạo mã có điều kiện cho MSO có chứa một bảng chiều rộng được đặt ở kích thước chiều rộng tối đa.

Ví dụ dưới đây:

<!--[if gte MSO 9]> 
<table width="640"><tr><td> 
<![endif]--> 
<table width="100%" style="max-width:640px;"><tr><td><img src="image.jpg" width="100%" /></td</tr></table> 
<!--[if gte MSO 9]> 
</td></tr></table> 
<![endif]--> 

Vẫn sẽ có một số quirks với việc sử dụng max-width là không phải tất cả sự ủng hộ của khách hàng đó. Tôi sẽ xem CSS compatability và thực hiện các chỉnh sửa nhỏ nếu cần trên đầu trang ở trên để đảm bảo nó phù hợp. Sau đó kiểm tra kiểm tra và kiểm tra thêm.

Answer 2

Đã phá vỡ đầu của tôi về chiều rộng hình ảnh trong email trong một ngày ngay bây giờ. Cuối cùng, nó làm việc theo cách "đáp ứng" ... phần nào. Những gì tôi thấy là, trong khi một số khách hàng email sẽ bỏ qua CSS cho <img> thẻ (ít nhất là CSS cho width và max-width) và thiết lập hình ảnh để toàn bộ chiều rộng của nó, hầu hết trong số họ sẽ thực sự tôn trọng width thuộc tính thiết lập trực tiếp trên <img>. Vì vậy, đây là những gì tôi đã làm:

<img class="logo" width="250" src="http://myweb.com/img/myimg.png" /> 

Và sau đó:

.logo { 
    display: block; 
    width: 310px !important; 
    max-width: 100% !important; 
} 

Khách hàng tôn trọng CSS, sẽ sử dụng CSS cho hình ảnh, trong khi khách hàng mà bỏ qua nó sẽ chỉ có chiều rộng thiết lập để 250px, để hình ảnh không phá vỡ bố cục cho các màn hình khác nhau.