Question

我的网站宽900像素。我有一个图像我想要更宽，1300px，但仍然在页面上居中。目前，当我在浏览器中打开页面时，我的中心位于图像的左侧。我可以用ctrl +鼠标滚轮缩小，让它更接近我的目标。但我不希望网站浏览者必须这样做。我怎样才能合理地轻松解决这个问题？

Answer 1

我认为最好的办法是使用一些JavaScript将图像从<img>标记转换为背景图像：

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

使用jQuery的JavaScript（但是没有它/使用其他工具你可以很容易地做到这一点）：

$(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

你的意思是以背景图像为中心？

background-position: center 0

这应该有效，因为它可以接受值的中心：http://reference.sitepoint.com/css/background-position

Answer 3

试试这个：

margin : 0px auto;

使用这个css代码，其中你的img所在的div的类。

如何将浏览器置于比网站更宽的图像上

3 个答案: