＆＃34;对象适合：包含＆＃34;不适用于Android Web浏览器

Question

Woocommerce网站上有一个带缩略图的类别页面。 所有缩略图都具有可变的大小，但具有适当的宽高比。

object-fit:contain可以正常使用Firefox。

以下是我用来正确对齐div中缩略图的样式。

img {
display:block;
left:50%;
top:50%;
transform: translateX(-50%) translateY(-50%);
max-height:100%
position:absolute;
object-fit:contain;
max-width:101%;
width:auto;
height:auto;
}

1。它不适用于Android的默认Web浏览器。图像适合高度但宽度适合 - 它们会被拉伸。

2。仅在Chrome上图像看起来有点模糊，尤其是在使用object-fit:contain时。如果我删除它，它们工作得很好。

Answer 1

由于object-fit尚未广泛使用css属性，更好的选择是使用background图片。

这样的事情：

＆＃13;

＆＃13;

.myimage {
  width: 200px;
}

＆＃13;

<div class="myimage" style="background:url(https://placehold.it/350x150) no-repeat center center; background-size:cover; min-height:300px;"></div>

＆＃13;

＆＃13;

＆＃13;

现在这种方法有一个明显的缺点 - 图像尺寸不会自动设置。因此，如果您没有指定div容器的min-height，那么您将看不到任何内容。您可以将图像裁剪为相同的尺寸，以便了解图像尺寸，或尝试以某种方式从图像中提取图像。

此方法的优点是一致性 - 无论您上传的图片如何，您博客/商店/投资组合类别中的所有图片都将具有相同的尺寸。如果您愿意，也可以将文本放在上面。

您可以使用wp_get_attachment_metadata在WordPress中获取图像元数据。从那里你可以将原始图像大小放在元素容器中。