How to reduce whole size wihtout affecting the image visiblity?

Question

I am doing a image puzzle using jquery, I have done every thing but, the cropped image size is very bigger (cropped original size), when the user select the 2x2 puzzle. So I want to reduce the size of the cropped image, but when I reduce the the width & height it affect the image visibility area. But I want to reduce the size without affecting the image.

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

Link is https://jsfiddle.net/xpon67bw/4/

score 2 · Accepted Answer · edited May 23 '17 at 12:26

Try adding transform: scale(0.5); css property.

You need to add browser prefix to the transform property for it to work on all devices for more information on browser compatibility of transform property

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

Here, you can get more information on transform css property.

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

For more information on scale

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

UPDATE:

To remove white space around the scaled image you can set origin of the transform.

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

This will align the scaled image to the left top of the box.

After a element is rendered if you transform an element other elements stay where they got rendered around the original element.

To remove this side effect you need to wrap your transformed element inside a div and resize it as and when you transform the element. Doing this will re-render all the elements around the transformed element.

For more information on how to do this checkout this stack-overflow answer.

SNIPPET

#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

To achieve what you are trying to do

HERE IS A JS-FIDDLE SHOWING A PUZZLE CHECKOUT.

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

But the div take whole width and height how can consider the scaled image size and width? — Merbin Joe, May 18 '17 at 07:16
Thanks for your answer, It is working, but only for left and top, please see this screen shot https://image.ibb.co/jXXobQ/updated.png — Merbin Joe, May 18 '17 at 09:30
@MerbinJoe could you please share the complete code as jsfiddle would be helpful to solve the issue. — Nadir Laskar, May 18 '17 at 13:05

Super User · Answer 2 · 2017-05-18T06:54:24.203

0

Your actual image width is 640px and you set it's width 1000px that's why it's visibility.

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

edited May 18 '17 at 06:54

answered May 18 '17 at 06:51

Super User

9,448
3
31
47

for puzzle only Im cropping the image – Merbin Joe May 18 '17 at 06:54
@MerbinJoe then you have to used big size image instead of small image – Super User May 18 '17 at 06:55
transform: scale(0.5); this was solved my problem. Now I can use this in big size or small size. Thanks for answering – Merbin Joe May 18 '17 at 06:58
@MerbinJoe `transform: scale(0.5);` gives extra space around your object. you can test it before using.. – Super User May 18 '17 at 07:02

How to reduce whole size wihtout affecting the image visiblity?

2 Answers2