I would like to ask you for a help with html email body. I have issue with parameter “object-fit: cover;” which actually works greate when displayed on web, but not working when used in html email body.
EmailProvider: New Outlook in WIN PC
Mobile: Outlook too
Here is example code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: ;font-family:roboto;}
.PanelPicture {background-color:#87878732; height:90px; max-width:500px; text-align:; border-radius:9px; border-style:solid; border-color:#878787FF; border-width:2px; padding-top:; padding-right:; padding-left:; padding-bottom:; margin-top:5px; margin-right:10px; margin-left:10px; margin-bottom:5px; }
.PanelBackground {background-color:#2A2A2ACC; max-width:500px; text-align:center; border-radius:8px; border-style:solid; border-color:#878787FF; border-width:2px; padding-top:0px; padding-right:0px; padding-left:0px; padding-bottom:0px; margin-top:30px; margin-right:20px; margin-left:20px; margin-bottom:30px; }
.Scena1 {width:100%; height:100%; max-height:px; display:; opacity:1; object-fit:cover; margin-left:; margin-top:; margin-bottom:; margin-right:; border-radius:8px; border-style:; border-color:; border-width:0px; }
</style>
</head>
<body>
<center>
<div class="PanelBackground">
<div class="PanelPicture">
<img src="paris.jpg" alt="Paris", class="Scena1">
</div>
</div>
</center>
</body>
</html>
To test you can change and “paris.jpg” for any picture you have , even you can test it here (“https://www.w3schools.com/css/tryit.asp?filename=trycss3_object-fit”) – just swithech codes in there and keep picture (picture is from that pages)
Issue:
When I receive this on my email box picture is not fit within “.PanelPicture” instead of it is overlaying it.
I found this pages “https://www.caniemail.com/features/css-object-fit/” which tels taht my email xo should support this feature.
I expect code revision to help me with fitting the picture in the panel for email html body too.