如何在不影响图像可见性的情况下减小整体尺寸？

Question

我正在使用 jquery 进行图像拼图，我已经完成了所有操作，但是当用户选择 2x2 拼图时，裁剪后的图像尺寸非常大（裁剪后的原始尺寸）。所以我想减小裁剪图像的大小，但是当我减小宽度和高度时，它会影响图像可见区域。但我想在不影响图像的情况下缩小尺寸。

 <div style="background-image: url(https://preview.ibb.co/kEf8bQ/rhyms1.jpg);background-position: 0px 0px;background-size:1000px;border:1px solid red;width:500px; height:281px;float:left"></div>

链接是https://jsfiddle.net/xpon67bw/4/

Answer 1

尝试添加transform: scale(0.5); css 属性。

您需要为转换属性添加浏览器前缀，以便它在所有设备上工作，以了解有关转换属性的浏览器兼容性的更多信息

https://developer.mozilla.org/en/docs/Web/CSS/transform?v=control#Browser_compatibility

在这里，您可以获得有关 transform css 属性的更多信息。

https://developer.mozilla.org/en/docs/Web/CSS/transform

有关规模的更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale

更新：

要删除缩放图像周围的空白，您可以设置变换的原点。

-webkit-transform-origin:left top;
-moz-transform-origin:left top;
 transform-origin:left top;

这将使缩放后的图像与框的左上角对齐。

如果你转换一个元素，则在渲染一个元素之后 其他元素保留在原始元素周围呈现的位置。

要消除这种副作用，您需要将转换后的元素包装在 div 中，并在转换元素时调整其大小。这样做会重新渲染转换后的元素周围的所有元素。

有关如何执行此操作的更多信息，请查看此堆栈溢出answer。

片段

#bg-image{
     background-image: url(https://preview.ibb.co/kEf8bQ/rhyms1.jpg);
    background-position: 0px 0px;
    background-size: 1000px;
    border: 1px solid red;
    width: 500px;
    height: 281px;
    float: left;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin:left top;
    -moz-transform-origin:left top;
    transform-origin:left top;
}

<div id="bg-image"></div>

UPDATE-2

实现你想要做的事情

这是一个显示拼图检查的 JS-FIDDLE。

https://jsfiddle.net/nmgcq52s/7/

Answer 2

您的实际图像宽度是640px，而您设置了它的宽度1000px，这就是它的可见性。

<div style="background-image: url(https://preview.ibb.co/kEf8bQ/rhyms1.jpg);background-position: 0px 0px;background-size:640 auto;border:1px solid red;width:300px; height:281px;float:left"></div>