Android Webブラウザで「Object-Fit：Contain」が機能しない

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.イメージわずかobject-fit:containを使用する場合は特に、Chromeのみにぼかし見えます。私がそれを取り除くと、彼らはうまくいく。

Answer 1

object-fitはまだ広く使われているCSSプロパティではないため、backgroundイメージを使用することをお勧めします。このような

何か：

.myimage { 
 
    width: 200px; 
 
}

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

は今、この方法の明白な欠点がある - 画像サイズが自動的に設定されますものではありません。したがって、divコンテナのmin-heightを指定しないと、何も表示されません。同じサイズに画像をトリミングすることで、画像のサイズを知ることができます。または、画像から何らかの形で抽出することもできます。

この方法の上には一貫性があります。ブログ/ショップ/ポートフォリオカテゴリのすべての画像は、アップロードした画像に関係なく同じサイズになります。また、必要に応じてテキストを上に置くこともできます。

wp_get_attachment_metadataを使用して、WordPressで画像メタデータを取得できます。そこから、ネイティブイメージサイズを要素コンテナに配置できます。