Question

我想将div设置为100px×100px，并设置一个比它大的图像，以便显示它的一部分，就像缩略图/预览整个图像一样。

我唯一的问题是图像从div的左上角开始，因为我想让图像大约一半，因为左上角没有很多图像，所以这是一个非常无用的缩略图。 / p>

.banner-thumbs {
    width:100px;
    height:100px;
    background-image:url(http://s246027975.websitehome.co.uk/apc_banner_1.png)
}

<div class="banner-thumbs"></div>

Answer 1

您可以使用background-position:center center;

.banner-thumbs {
        width:100px;
        height:100px;
        background-image:url(http://s246027975.websitehome.co.uk/apc_banner_1.png);
        background-position:center center;
    }

DEMO http://jsfiddle.net/RVd2L/2/

Answer 2

我认为你正在寻找background-position。

你可以添加

background-position: 50% 50%;

让背景正好在中途开始。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

Answer 3

您可以设置图像方向...或者在图像路径完成后重复说明

background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;

Answer 4

这取决于您的初始图像大小，但您可以使用坐标中的负值来移动背景图像，例如

.banner-thumbs {
  width:100px;
  height:100px;
  background-image:url(http://s246027975.websitehome.co.uk/apc_banner_1.png)
  background-position: -50px -50px;
}

更改div内的图像背景位置？

4 个答案: