Help us understand the problem. What is going on with this article?

画像の上に空白ができた場合の応急処置

issue

以下のように、chromeでimgタグにmarginをつけてないのにobject-fitプロパティでcoverをつけてる時上部に空白ができてしまうことがある
safariでは上部の空白は無い

image-space.png

image-iitem.png

応急処置法

imgタグの親要素に

display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 0;

imgタグに

grid-row: 1;
grid-column: 1;

軽く解説しとくと
display:gridで子要素が親要素の起点の左上に移動するためimgタグの上の空白がなくなる
grid-template-columns: 1frで一列目1が1fr
grid-template-rows: 1fr 0で1行目が1fr2行目が0

chrome環境でデフォルトで2行目のspaceが確保されてしまうので2行目を0指定している
1frは自分で調べてください

grid-rowは子要素であるimgタグを何行分確保するかなので1行分確保している(子要素が一つのため)
grid-columnはimgタグを何列分確保するかのため1列分確保している

以上
頑張ってください

miyabiya
普段酒を飲みながらプログラミングをしております stack Nodejs php css3 html5 Python Ruby React Angular vue redux Docker ionic React Native Rails Laravel cakephp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away