CODEWITHSUNDEEP
jqueryhtmlcssimage
Merbin Joe
Merbin Joe

Reputation: 121

How to reduce whole size wihtout affecting the image visiblity?

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/

Upvotes: 0

Views: 57

Answers (2)

Nadir Laskar
Nadir Laskar

Reputation: 4150

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/

Upvotes: 2

Super User
Super User

Reputation: 9642

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>

Upvotes: 0

Related Questions