質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.44%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

2回答

844閲覧

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

Mr_PONPON_MARU

総合スコア35

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2023/05/18 01:32

編集2023/05/18 08:01

実現したいこと

下記の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/

該当のソースコード

style.css

1-中略- 2 3/* テンプレートファイルの当該箇所で利用されていたスタイル*/ 4.u-portfolio__image { 5 display: block; 6 width: 100%; 7 height: auto; 8 transition: all .2s ease; 9} 10 11/* 今回新たに追記した独自スタイル*/ 12.u-portfolio__image_original { 13 display: block; 14 width: auto; 15 height: 100%; 16 transition: all .2s ease; 17 object-fit: cover; 18} 19 20.u-portfolio__item:hover .u-portfolio__image .u-portfolio__image_original { 21 transform: translate3d(0, -60px, 0); 22} 23

mypage.html

1-中略- 2<div class="js-shuffle u-portfolio row no-gutters mb-6"> 3 {% for article in s.name.all %} 4 <figure class="col-sm-6 col-md-4 u-portfolio__item" data-groups='["its-illustration"]'> 5 6 <!-- 独自スタイルの記載箇所 --> 7 <img class="u-portfolio__image_original" src="{{ article.thumbnail.url }}" alt="Image Description"> 8 9 <figcaption class="u-portfolio__info"> 10 <h6 class="mb-0">{{ article.title }}</h6> 11 <small class="d-block">Branding</small> 12 </figcaption> 13 <a class="js-popup-image u-portfolio__zoom" href="#">Zoom</a> 14 </figure> 15 {% endfor %} 16</div>

発生しているエラー

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

イメージ説明

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

よろしくお願いします。

実現したい状態

イメージ説明

補足情報

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

Styles

1element.style { 2} 3.u-portfolio__zoom { 4 position: absolute; 5 top: 0; 6 bottom: 0; 7 left: 0; 8 right: 0; 9 text-indent: -10000px; 10} 11a { 12 color: #59287a; 13} 14a { 15 color: #59287a; 16 text-decoration: none; 17 background-color: transparent; 18 -webkit-text-decoration-skip: objects; 19} 20*, *::before, *::after { 21 box-sizing: border-box; 22} 23user agent stylesheet 24a:-webkit-any-link { 25 color: -webkit-link; 26 cursor: pointer; 27 text-decoration: underline; 28} 29body { 30 font-weight: 400; 31 font-size: 1rem; 32 font-family: "Open Sans", sans-serif; 33 line-height: 1.6; 34 color: #1b1e24; 35 -webkit-font-smoothing: antialiased; 36 -moz-osx-font-smoothing: grayscale; 37 -moz-font-feature-settings: "liga", "kern"; 38 text-rendering: optimizelegibility; 39} 40body { 41 margin: 0; 42 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 43 font-size: 1rem; 44 font-weight: 400; 45 line-height: 1.5; 46 color: #212529; 47 text-align: left; 48 background-color: #fff; 49} 50:root { 51 --blue: #007bff; 52 --indigo: #6610f2; 53 --purple: #6f42c1; 54 --pink: #e83e8c; 55 --red: #dc3545; 56 --orange: #fd7e14; 57 --yellow: #ffc107; 58 --green: #28a745; 59 --teal: #20c997; 60 --cyan: #17a2b8; 61 --white: #fff; 62 --gray: #6c757d; 63 --gray-dark: #343a40; 64 --primary: #59287a; 65 --secondary: #00c9a7; 66 --success: #0dd157; 67 --info: #2972fa; 68 --warning: #fab633; 69 --danger: #fb4143; 70 --light: #f6f9fc; 71 --dark: #1b1e24; 72 --breakpoint-xs: 0; 73 --breakpoint-sm: 576px; 74 --breakpoint-md: 768px; 75 --breakpoint-lg: 992px; 76 --breakpoint-xl: 1200px; 77 --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 78 --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; 79} 80html { 81 font-size: 1rem; 82} 83html { 84 font-family: sans-serif; 85 line-height: 1.15; 86 -webkit-text-size-adjust: 100%; 87 -ms-text-size-adjust: 100%; 88 -ms-overflow-style: scrollbar; 89 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 90} 91*, *::before, *::after { 92 box-sizing: border-box; 93} 94*, *::before, *::after { 95 box-sizing: border-box; 96} 97::selection { 98 color: #fff; 99 background-color: #59287a; 100}

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2023/05/18 02:01

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

2023/05/18 03:04

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

回答2

0

ベストアンサー

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

投稿2023/05/18 14:37

kei344

総合スコア69502

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mr_PONPON_MARU

2023/05/22 06:42 編集

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

0

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

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

投稿2023/05/18 04:29

maisumakun

総合スコア145366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Mr_PONPON_MARU

2023/05/18 08:10

コメントありがとうございます。 検証ツールのコンソールで確認したところ、当該cssファイルの読み込みエラーは発生していない様子でした。 そこで、ブラウザのキャッシュをクリアし、再び読み込んで検証ツールでcssを確認してみたところ、当該部のcssが反映されるようになりました。 この手続きを踏まえ、補足情報の修正と一部画像の差し替えをさせていただきました。 現状、`object-fit:cover`が指定されているのにも関わらず、親要素に合わせて拡大・トリミングがなされていないといった問題に直面しております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問