【CSS】object-fit:cover; が反映されない

Question

実現したいこと

下記のhtmlテンプレートをベースに、Bootstrapを利用してWebページを作成しています。
https://htmlstream.com/preview/stream-ui-kit/about-me.html

その際大きさや縦横比が異なる画像でも、全て同一サイズで表示できる様にしようとしています。(画像参照)

前提

下記サイトを参考にimgタグのcss属性でobject-fit:cover;を指定することで、大きさや縦横比が異なる画像でも、縦横比を維持したまま全て親要素内に収まるようにトリミング出来る事を知り、bootstrapのcssファイルに独自スタイルを記載しました。
https://digitor.jp/textbook/css-size-aspect-trimming/

該当のソースコード

-中略-

/* テンプレートファイルの当該箇所で利用されていたスタイル*/
.u-portfolio__image {
  display: block;
  width: 100%;
  height: auto;
  transition: all .2s ease;
}

/* 今回新たに追記した独自スタイル*/
.u-portfolio__image_original {
  display: block;
  width: auto;
  height: 100%;
  transition: all .2s ease;
  object-fit: cover;
}

.u-portfolio__item:hover .u-portfolio__image .u-portfolio__image_original {
  transform: translate3d(0, -60px, 0);
}

-中略-
<div class="js-shuffle u-portfolio row no-gutters mb-6">
      {% for article in s.name.all %}
      <figure class="col-sm-6 col-md-4 u-portfolio__item" data-groups='["its-illustration"]'>
        
        <!-- 独自スタイルの記載箇所 -->
        <img class="u-portfolio__image_original" src="{{ article.thumbnail.url }}" alt="Image Description">

        <figcaption class="u-portfolio__info">
          <h6 class="mb-0">{{ article.title }}</h6>
          <small class="d-block">Branding</small>
        </figcaption>
        <a class="js-popup-image u-portfolio__zoom" href="#">Zoom</a>
      </figure>
      {% endfor %}
</div>

発生しているエラー

しかし、トリミングが行われずに実際は下記の画像のように空白ができてしまいます。(便宜上、親要素の領域を赤色四角の枠で表示しています)

そもそもobject-fit:cover;で解決出来る問題ではないのか、またはbootstrapのstyle.cssに独自スタイルを加筆する運用方法が悪いなど、自分なりに多角的に考えてみても分からず、今回質問をさせていただきました。

よろしくお願いします。

実現したい状態

補足情報

・htmlでは、PythonのDjangoテンプレートを利用しています
・ブラウザの検証ツール当該箇所を確認してみたところ、下記の様に表示されました

element.style {
}
.u-portfolio__zoom {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -10000px;
}
a {
    color: #59287a;
}
a {
    color: #59287a;
    text-decoration: none;
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}
*, *::before, *::after {
    box-sizing: border-box;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}
body {
    font-weight: 400;
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    line-height: 1.6;
    color: #1b1e24;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga", "kern";
    text-rendering: optimizelegibility;
}
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}
:root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #59287a;
    --secondary: #00c9a7;
    --success: #0dd157;
    --info: #2972fa;
    --warning: #fab633;
    --danger: #fb4143;
    --light: #f6f9fc;
    --dark: #1b1e24;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
html {
    font-size: 1rem;
}
html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -ms-overflow-style: scrollbar;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
*, *::before, *::after {
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
::selection {
    color: #fff;
    background-color: #59287a;
}

・検証ツールのコンソール画面でcssファイルの読み込みエラーがないか確認してみたところ、エラーは検出されず独自classの読み込みには成功している様子でした。
・変更を行うたびにブラウザのキャッシュクリアを行なっています。

Comments

[maisumakun]

CSSの適用状況（見た目ではなく、ブラウザの検証ツールで詳細を見る）は確認してみましたか？

[Mr_PONPON_MARU]

コメントありがとうございます。検証ツールの詳細内容を補足情報へ記載いたしました。

Answer 1

状況を再現できるコードが提示されていないのですが、.u-portfolio__image_originalは
width: auto;->width: 100%;では？

Comments

[Mr_PONPON_MARU]

widthの指定をautoから%指定にしたらできました。
調べてみたところ、object-fit:coverは<img>のwidthとheightをどちらもauto以外の値で指定しなければ反映されないみたいでした。

Answer 2

ブラウザの検証ツール当該箇所を確認してみたところ、下記の様に表示されました

上で書いたCSSが全く適用されていないようです。style.cssがきちんと反映されるようになっているのかも確認が必要です。

Comments

[Mr_PONPON_MARU]

コメントありがとうございます。

検証ツールのコンソールで確認したところ、当該cssファイルの読み込みエラーは発生していない様子でした。
そこで、ブラウザのキャッシュをクリアし、再び読み込んで検証ツールでcssを確認してみたところ、当該部のcssが反映されるようになりました。

この手続きを踏まえ、補足情報の修正と一部画像の差し替えをさせていただきました。

現状、`object-fit:cover`が指定されているのにも関わらず、親要素に合わせて拡大・トリミングがなされていないといった問題に直面しております。