Tràn: bị ẩn không hoạt động trong email

Question

Tôi đang cố gắng gửi một số email có một số hình ảnh. Nếu tôi hiển thị hình ảnh trên trang web, chúng rộng 100x và cao 100px, nhưng nếu hình ảnh cao hơn 100px, nó sẽ bị ẩn các pixel thừa.

Nếu tôi cố gắng gửi nó trong email, tôi không thể làm cho nó ghi lại chiều cao vượt quá của hình ảnh.
Dưới đây là những gì tôi đang gửi trong email:

<img src="<?php echo base_url().$thumb;?>" style="border:1px solid #35538d;width:100px;height:100px;overflow:hidden;text-align:center;background-color:#f0f0f0;" rel="nofollow" alt="Profile Photo"> 

Answer 1

Nó khá có thể là CSS bạn đang cố gắng chỉ là không được hỗ trợ bởi ứng dụng email của bạn. Các ứng dụng email thường hỗ trợ một tập con HTML được giảm đáng kể và chỉ có CSS ​​tối thiểu. Khi soạn email HTML, thường là trường hợp quay lại các khái niệm cơ bản ... Bố cục bảng HTML, v.v. để nhận được hỗ trợ lớn nhất.

EDIT: IMO cố gắng cây trồng một hình ảnh sử dụng HTML/CSS sẽ là không thể nếu bạn muốn điều này để làm việc trên tất cả khách hàng email. Các thuộc tính có liên quan có thể giúp đạt được điều này: hình nền, chiều cao, tràn, clip, v.v. chỉ không được hỗ trợ trên bảng. Vì vậy, mặc dù nó sẽ làm việc cho một số, nó sẽ không cho người khác.

Phương án thay thế có thể làm giảm chiều rộng sao cho chiều cao luôn là 100px. Bạn sẽ cần phải tính toán chiều rộng phía máy chủ để duy trì tỷ lệ co thích hợp.

Tuy nhiên, tôi nghĩ rằng giải pháp tốt nhất có thể là tạo ra một máy chủ hình ảnh 100px vuông góc (nother) với PHP?

Answer 2

Bạn có thể muốn xem trang Guide to CSS support in email clients để xem thuộc tính CSS nào bạn có thể và không thể sử dụng cho các ứng dụng email khác nhau.

Answer 3

Để thực hiện công việc này, bạn cần phải tạo một đối tượng hình vuông (Div hoặc bảng) và đặt hình ảnh vào đó làm hình nền. Nếu bạn cần hình ảnh là một liên kết, bạn cần phải đặt một gif trong suốt lên nó.

Answer 4

Để trả lời hình nền Alan O'Rourke không được hỗ trợ trong ứng dụng email Outlook. Ngoài ra, nếu bạn đang cố gắng sử dụng hình nền, hãy chắc chắn bao gồm nó dưới dạng kiểu nội tuyến vì Gmail sẽ loại bỏ bất kỳ CSS nào không trực tuyến.