Javascript 如何缩小更大的图像，同时在CSS中只显示其一部分（或在必要时向混合中添加JS）？

我的图像是1024x1024，分为4个象限：

我想缩小这个图像，使象限2为256x256，并遮罩或隐藏其他3个象限，使其仅在页面上可见。像这样：

---

如何做到这一点？是否可以使用纯CSS，或者一路上是否需要js？

您可以将图像作为背景图像分配给元素，并使用背景位置：0px-30px例如，显示图像的该部分。基本上，您将元素的高度和宽度定义为要使用的象限的大小，然后使用css背景位置：属性移动该象限使其可见。

您可以将图像作为背景图像分配给元素，并使用背景位置：0px-30px例如，显示图像的该部分。基本上，您可以将元素的高度和宽度定义为要使用的象限大小，然后使用css背景位置：属性将该象限移动到可见位置。

假设您针对的浏览器（FF4+、IE9+、Safari 4.1+Chrome 3+）可以使用

背景大小

css属性，然后，您可以单独在CSS中执行此操作：

.bg {
    background-image: url(http://i.stack.imgur.com/HQaif.jpg);
    background-repeat: no-repeat;    
    background-size: 203%;
    background-position: top left; 
    width: 256px;
    height: 256px;  
}

如果删除每个部分之间的红色关键线，则可以将size属性设置为

512px

，如果以后需要再次调整大小，这将使计算更容易

---

有关

的更多信息假设您针对的浏览器（FF4+、IE9+、Safari 4.1+Chrome 3+）可以使用

背景大小

CSS属性，那么您可以仅在CSS中执行此操作：

.bg {
    background-image: url(http://i.stack.imgur.com/HQaif.jpg);
    background-repeat: no-repeat;    
    background-size: 203%;
    background-position: top left; 
    width: 256px;
    height: 256px;  
}

如果删除每个部分之间的红色关键线，则可以将size属性设置为

512px

，如果以后需要再次调整大小，这将使计算更容易

---

有关更新的更多信息：添加了JS和新的HTML

JS

$(document).ready(function() {
    $('#dyna').change(function() {
        $('#myBox').attr('class', 'box quad' + $('#dyna').val());
    });
});

.box{
    background:url('http://i.stack.imgur.com/HQaif.jpg');
    width:512px;
    height:512px;
    background-size: 200%;
    background-repeat:no-repeat;
}

.quad1{
    background-position: 0% 0%;
}

.quad2{
    background-position: 100% 0;
}

.quad3{
    background-position: 0 100%;
}

.quad4{
    background-position: 100% 100%;
}

HTML

<select id="dyna">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
<div id="myBox" class="box quad1"></div>
<!-- if manually, change the "quad" class number accordingly-->

您可以添加javascript来动态更改“quad”类（quad1到quad4）

---

请参见操作：更新：添加了JS和新的HTML

JS

$(document).ready(function() {
    $('#dyna').change(function() {
        $('#myBox').attr('class', 'box quad' + $('#dyna').val());
    });
});

.box{
    background:url('http://i.stack.imgur.com/HQaif.jpg');
    width:512px;
    height:512px;
    background-size: 200%;
    background-repeat:no-repeat;
}

.quad1{
    background-position: 0% 0%;
}

.quad2{
    background-position: 100% 0;
}

.quad3{
    background-position: 0 100%;
}

.quad4{
    background-position: 100% 100%;
}

HTML

<select id="dyna">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
<div id="myBox" class="box quad1"></div>
<!-- if manually, change the "quad" class number accordingly-->

您可以添加javascript来动态更改“quad”类（quad1到quad4）

---

请参见操作：

这是精灵的常见用法示例，它不会调整图像大小/缩放图像。这不会缩小图像。要显示的部分的背景将被裁剪。这是精灵的常见用法示例，它不会调整图像的大小/比例。这不会缩小图像。将要显示的部分的背景将被裁剪。非常有趣。不过，我认为支持IE8也不错。你是否有一个js适应，将有助于这方面；否则，这是一个非常干净的解决方案。您可以使用Modernizer（），这是一个javascript库，它将CSS3和HTML5功能（包括背景大小）添加到旧浏览器中。超级新闻，谢谢。因此，简单地包括Modernizer就可以了，或者我需要采取任何额外的步骤来让它正常工作，特别是ie8？IIRC，您只需要将脚本添加到页面中。文档将有完整的安装说明。我现在有一个转折点。原来，

背景图像

url需要每分钟更新一次。我已经为应用程序中的

img

标签涵盖了这一点；除了在

img标签中的实际图像与在css

background图像中的实际图像之外，有没有其他方法可以实现上述功能？非常有趣。不过，我认为支持IE8也不错。你是否有一个js适应，将有助于这方面；否则，这是一个非常干净的解决方案。您可以使用Modernizer（），这是一个javascript库，它将CSS3和HTML5功能（包括背景大小）添加到旧浏览器中。超级新闻，谢谢。因此，简单地包括Modernizer就可以了，或者我需要采取任何额外的步骤来让它正常工作，特别是ie8？IIRC，您只需要将脚本添加到页面中。文档将有完整的安装说明。我现在有一个转折点。原来，

背景图像

url需要每分钟更新一次。我已经为应用程序中的

img

标签涵盖了这一点；除了在

img标签中的实际图像与css

background image`中的实际图像外，有没有其他方法可以实现上述功能？但是，这并不是从示例中显示的内容向下缩放相应的象限…但是，这并不是从示例中显示的内容向下缩放相应的象限。。。