4

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

4

3 回答 3

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/

于 2012-10-15T23:42:08.743 回答
0

你的意思是居中背景图像？

background-position: center 0

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

于 2012-10-15T21:49:09.567 回答
0

试试这个：

margin : 0px auto;

在您的 img 所在的 div 类中使用此 css 代码。

于 2012-10-15T23:18:45.917 回答