なぜ幅と高さがオブジェクトにフィットしていないのですが回避策がありますか？

Question

イントロ

ルールオブジェクトフィットで値を使用していましたが、私はいくつかの奇妙な動作に出くわしましたが、この問題の理由があるかどうか疑問に思いました。

例このコードで

.block { 
    &__img { 
    width: 100%; 
    height: 50%; 
    } 

    &--portrait { 
    .block__img { 
     width: unset; 
     height: unset; 
     object-fit: cover; 
    } 
    } 
} 

画像の高さと幅があっても（画像ではなく、そのcover幅そののorignalの高さと幅を維持意味する）object-fitスタイルルールに解除されています。 unsetが別の名前のルールに影響するのはなぜですか？

CSSがレンダリングされるときに、object-fitとheight/というものがありますか？

Answer 1

イメージのCSSサイズはカスケードから削除されますが、イメージは依然としてその固有の次元を保持します。画像のボックス、すなわち画像用に生成されたCSSボックスは、これらの固有の寸法（CSS2の10.3.2および10.6.2セクションを参照）でレンダリングされ、object-fit: coverはobject-fit: fillと異なる動作をしません。ボックスのアスペクト比は変わりません。

これはunsetキーワードでは問題ありません。 object-fitの性質は、その振る舞いがheightとwidthの値の影響を直接受けることを意味します。