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属性。

您需要在transform属性中添加浏览器前缀才能在所有设备上运行，以获取有关转换属性的浏览器兼容性的更多信息

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

在这里，您可以获得有关转换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。

<强>段

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

<强> 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>

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

2 个答案: