divより横幅が大きい画像要素の位置指定にていて

Question

overflow:hiddenが設定されたdivブロックがあります。
この中にimg要素があり横幅が長いものとするとき、img要素の中央縦線がdivの右端にピッタリ重なるように移動させたいのですがどのように指定すればいいでしょうか？

Answer 1

こんにちは。

色々方法があると思いますが、translateで動かすのは分かりやすい方法だと思います。

サンプル

img{
  transform: translateX(-25px);
}

Comments

[UpaZiro]

transformで解決できましたありがとうございます！

Answer 2

jQueryだとどうでしょうか。背景画像がdivよりも大きく、background: cover;になっている前提です。

var path = "画像のパス";
var element = new Image();
var boxHeight =　$("表示するdivのセレクタ").height(); 
var boxWidth =　$("表示するdivのセレクタ").width(); 

element.onload = function () {
    var originWidth = element.naturalWidth;
    var originHeight = element.naturalHeight;
    var resizeWidth = ( boxHeight * originWidth ) / originHeight;
    var position = ( resizeWidth / 2 ) - boxWidth;
    $('表示するdivのセレクタ').css('background-position','center left -'+ position + 'px');

};
element.src = path;

背景画像ではなくimgタグで挿入されている場合は、functionの最終行をこちらに変更してみてください。

$('表示するdivのセレクタ > img').css({'object-fit':'cover','object-position':'-'+ position + 'px center','max-height':'100%'});

Comments

[UpaZiro]

ありがとうございます！