【環境】
【発生している問題】
急遽対応ブラウザにIE11が加わり、それによってヘッダ部に表示される画像に見切れが発生する（Chrome、Edgeでは発生しない問題)
【実現したいこと】
もともとがIEでの動作を想定していなかったので、既存のコードをできるだけ改修せず、プラグインの追加なども行わずに（pollyfillなどを新たに読み込むことが封じられている）画像の見切れ問題の解消を行いたい。
これを↓
こんな感じにしたい↓
【仮説】
現状のアプローチとしてはobject-fitプロパティを使用することで問題が解消できるのでは？と考えています。
ただしIE11では非対応かつpollyfillを使用することができないため（ぐぬぬ）、jQueryとCSSで疑似的に再現するしかないかと考えております。
【試したこと～時系列に沿って～】
(function($){
$.fn.imageBg = function() {
var $this = this;
var imgSrc = $this.find('img').attr('src');
// URLのパスのみ抽出し、imgタグを非表示にする
$this.find('img').hide();
// backgroundImageとして画像を描画する
$this.css({
backgroundImage: 'url("' + imgSrc + '")'
});
}
// セレクタで取得している全クラスに上記のメソッドを適用する
$('.js-img-bg').each(function() {
$(this).imageBg();
});
})(jQuery);
<a class="col-8 col-md-6 px-0 py-0 float-left" th:href="@{/admin/teacher_portal}">
<div class="img-box js-img-bg thumb">
<img th:src="@{/image/icon/common/logo.svg}" alt="">
</div>
</a>
.thumb {
background: no-repeat center center / contain;
height: 200px;
width: 200px;
}
上記記述では実現できず、おそらく原因はDOM要素を読みむ前に$(this).imageBg();
こちらの箇所でDOMの取得を行おうとしているから実現できないと仮定して、
****************** 追記*********************************
$(document).ready(function(){
$('.js-img-bg').each(function() {
$(this).imageBg();
});
}) ;
↑こうすることでDOMの取得を行おうとしているから実現できない問題は解決されます。
確認のためDOMの読み込み完了後に起動する以下のメソッドに変更したところ、
$(function() {
$('.js-img-bg').ready(function() {
var $this = $(this);
//画像URLを取得する
var imgSrc = $this.find('img').attr('src');
//imgタグを非表示にする
$this.find('img').hide();
//背景画像として表示させる
$this.css(
'backgroundImage' , 'url("' + imgSrc + '")'
);
});
});
$this.css()の前の処理までは正常に動作していることを確認し、cssのプロパティが適用されない状態となりました。
そこで、cssプロパティの適用対象をdivの親要素であるaタグに指定したところ、cssプロパティは適用されるが、画像は表示されないという状態となります。
$this.css(
'backgroundImage' , 'url("' + imgSrc + '")'
);
こいつを↑
$('.float-left').css(
'backgroundImage' , 'url("' + imgSrc + '")'
)
こいつに書き換えて実行↑
style=background-image: url("/homeservices_dev/image/icon/common/logo.svg");
こいつがHTMLテキストとしてレンダリングされるようにはなるが、画像は表示されない。
そこで、問題の切り分けとして、一度imgタグを使用せずjQueryも使用せず、表示させる以下の方法を試してみました。
<div class="image">
<span class="image-inner" style="background-image: url('/homeservices_dev/image/icon/common/logo.svg');"></span>
</div>
上記記述でも画像は表示されない状態です。
ただし、HTMLとしては以下の画像のようにレンダリングされています。
上記のパスで初期表示時点で画像が表示されていることは確認済みなので、パスの間違いはないです。
【仮説】
以上を踏まえて、
初期表示の時点で画像を表示させる際はthymeleafのリンク式を使用して表示されているので、
~~<img th:src="@{/image/icon/common/logo.svg}" alt="">~~
現在はリンク式とべた書きのURLの差異に原因があるのではないかと考えております。
imgタグにURLをべた書きにしたところ、画像が表示されたので、thymeleafの問題ではなく、背景画像として表示させるうえで何かしらの記述が抜けているようです。
【質問】
【解決方法】
上記方法とは別に視点で、SVNファイル特有のIEの設定が関与している模様。
以下、参考
参考記事をもとにimgタグにmax-width=100%の指定と、親要素にwidthの指定を行うことで問題が解消できる。
【参考記事】