javascript - サイトよりも幅の広い画像をブラウザの中央に表示する方法

Question

私のサイトは幅900pxです。1300px の幅で表示したい画像がありますが、それでもページの中央に配置します。現在、ブラウザでページを開くと、画像の左側が中央に表示されます。ctrl + マウス ホイールを押してズーム アウトし、目標に近づけることができます。しかし、サイトの閲覧者がこれを行う必要はありません。これを合理的に簡単に修正するにはどうすればよいですか？

Answer 1

最善の策は、画像を<img>タグから背景画像に変換する JavaScript を少し使用することだと思います。

<div class="wide-image"><img src="..."></div>

jQuery を使用した JavaScript (ただし、jQuery を使用しなくても、他のツールを使用して簡単に実行できます):

​​$(function() {
    $('.wide-image').each(function() {
        var $div = $(this),
            $img = $div.find('img:first');

        // Transform normal image into background image
        $div.css('background', 'url(' + $img.attr('src') + ') no-repeat center center');

        // Adjust the <div>s height to fit the image's height
        $div.height($img.height());        

        // Hide the original image
        $img.hide();
    });
});​

デモ: http://jsfiddle.net/NBKsm/

Answer 2

これを試してください：

margin : 0px auto;

あなたのimgがそこにあるdivのクラスでこのcssコードを使用してください。

Answer 3

背景画像を中央に配置するということですか？

background-position: center 0

値の中心を受け入れることができるので、それはうまくいくはずです: http://reference.sitepoint.com/css/background-position