以与使用 background-img 相同的方式使 <img> 具有响应性和 SEO 友好性

Question

我想让 img 标签以与使用背景图像的 div 中相同的方式响应 background-position: center 和 background-size: cover 我的问题是，我将发布很多不具有相同宽度或高度的图像（在 网格布局 中）。 Soo，如果我使用带有 height:auto 的 img 标签，我每次都会得到不同的高度。 当前解决方案：

1。 使用 bg-image 和 1pixel 图像作为宽度和高度：

<div style="background-image:url(http://example.com/img.jpeg);
background-position: center;
background-size: cover; width="30%" ">
<img src="/1pix.png" height="200px" alt="Alt text">
</div>  

1. 使用背景图片和img inside with visibility:hidden

   <div style="background-mage:url(http://example.com/img.jpeg);
   style="background-position: center;
   background-size: cover; height="200px" width="30%">
   <img src="/example.jpeg"  style="visibility:hidden" alt="Alt text">
   </div>  
   

3.使用多种图片尺寸（小、大、中）

有没有办法让 img 标签在流动网格中工作，让它看起来像在 bg-image(bg-contain) 中一样好，或者使 bg-image SEO 对某种在 a 中工作的元标签友好与alt标签相同的方式。 谢谢！

Answer 1

如果你愿意为 IE 使用 polyfill，object-fit CSS 属性可以帮助你。它基本上是background-size，但用于 HTML 标签。您需要为<img> 定义高度和宽度并添加object-fit: cover;。

object-fit 的浏览器覆盖范围可以在here 找到，IE8+ 的 polyfill 可以在here 找到。