Yahoo Email display issues

Capture
I created emails with html and css, the email is displaying very fine on gmail and hotmail but the images are not showing properly on yahoo, I have tried solving this but do not know what to do.

<tr>
                        <td align="left" style="padding:30px 0 8px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333333;font-size:20px;line-height:26px;font-weight:bold">Featured Movies<br />
                        <span style="font-size:16px;"><em>For relaxation, we&rsquo;ve got movies to keep you entertained during the weekend.</em></span></td>
                    </tr>
                    <tr>
                        <td style="background-color: white; padding:">
                        <table border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                            <tbody>
                                <tr>
                                    <th align="center" valign="top" width="320">
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;max-width:100%" width="100%">
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top"><a data-saferedirecturl="https://hotels.ng/" href="https://hotels.ng/hotel/26241-ibis-lagos-airport-lagos?utm_source=hng02082022&amp;utm_medium=email&amp;utm_campaign=html-deals&amp;utm_content=hi-here-are-some-safe-hotels-to-check-in-to-now?&amp;utm_term=control" style="display:block" target="_blank"><img alt="" class="CToWUd" data-bit="iit" src="https://info.hotels.ng/uploads/1662394368.PNG" style="object-fit: cover;display: block; min-width: 100%; max-width: 100%; overflow: hidden; border-radius: 8px; border-width: 0px; border-style: solid; width: 296px; height: 206px !important;" /> </a></td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="padding:15px 0 4px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:20px;line-height:22px;font-weight:bold;color:#333333" valign="top">Thor: Love and Thunder</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="padding:0 0 0px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:normal;color:#6b6b6b" valign="top">Love and Thunder is a 2022 American superhero film based on Marvel Comics featuring the character Thor, produced by Marvel Studios. It is the sequel to Thor: Ragnarok and the 29th film in the Marvel Cinematic Universe and it&#39;s in cinemas</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </th>
                                    <td>&nbsp;</td>
                                    <th align="center" valign="top" width="320">
                                    <table align="left" border="0" cellpadding="0" cellspacing="0" role="presentation" style="padding-bottom: 0px; border-collapse:separate;max-width:100%" width="100%">
                                        <tbody>
                                            <tr>
                                                <td align="left" valign="top"><a data-saferedirecturl="https://hotels.ng/" href="https://hotels.ng/hotel/26241-ibis-lagos-airport-lagos?utm_source=hng02082022&amp;utm_medium=email&amp;utm_campaign=html-deals&amp;utm_content=hi-here-are-some-safe-hotels-to-check-in-to-now?&amp;utm_term=control" style="display:block" target="_blank"><img alt="" class="CToWUd" data-bit="iit" src="https://info.hotels.ng/uploads/1662393994.png" style="object-fit: cover;display: block; min-width: 100%; max-width: 100%; overflow: hidden; border-radius: 8px; border-width: 0px; border-style: solid; width: 296px; height: 206px !important;" /> </a></td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="padding:15px 0 4px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:20px;line-height:15px;font-weight:bold;color:#333333" valign="top">Beast</td>
                                            </tr>
                                            <tr>
                                                <td align="left" style="padding:0 0 0px 0;font-family:Montserrat,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:normal;color:#6b6b6b" valign="top">Beast is a 2022 American survival thriller film directed by Baltasar Korm&aacute;kur from a screenplay by Ryan Engle, based on a story by Jaime Primak Sullivan. The film stars Idris Elba, Iyana Halley, Leah Sava Jeffries, and Sharlto Copley and it&#39;s on cinema</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                        </td>
                    </tr>

Where is the rest of the table code? The code you posted starts with a <tr>and ends with a </tr>. Should see opening/closing table tags.

Also, you did not explain or show how “the images are not showing properly on yahoo”.

I added the table tags I referenced above and sent an email to my Yahoo email account and it appears Yahoo changes the height property to min-height for some reason. I was able to change the height:206px; to max-height:206px and it kept it but the big issue is that Yahoo email does not support the object-fit CSS property currently, so you can not count on using it (as it gets deleted) and makes the images look fuzzy.

So I was able to figure out how to make the images appear as you intended without using object-fit. You can get rid of the img tag and add a background property using the image as its value.

I have formatted the code below to make it easier to see each td and anchor element attribute/value.

NOTE: The only issue I find with this approach is accessibility, as the anchor element does not have any text to explain what the link is linking to. I tried adding “link to movie” for the anchor element’s text and making the anchor text opacity 0, but Yahoo removes the opacity property from the style attribute.

<td
  align="left"
  valign="top"
  style="width: 296px; height: 206px; background:url('https://info.hotels.ng/uploads/1662394368.PNG'); background-size:  cover; border-radius: 8px; border-width: 0px; border-style: solid;"
>
  <a
   data-saferedirecturl="https://hotels.ng/"
   href="https://hotels.ng/hotel/26241-ibis-lagos-airport-lagos?utm_source=hng02082022&amp;utm_medium=email&amp;utm_campaign=html-deals&amp;utm_content=hi-here-are-some-safe-hotels-to-check-in-to-now?&amp;utm_term=control"
   style="display:block;width:100%;text-decoration:none;height:206px;"
   target="_blank">
  </a>
</td>