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