Have Geek Brain

Shrink image using javascript

I need to compress an image that has been stored in a background div using javascript. For this image, the four sides have a rounded corner.

Is this possible in javascript?

any suggestions?

0


a source to share


4 answers


You cannot resize the background with JS.

You can split the image into 4 corner images and split the nests to display all of them:

<div style="background:url(tl.jpg) top left no-repeat">
    <div style="background:url(tr.jpg) top right no-repeat">
        <div style="background:url(bl.jpg) bottom left no-repeat">
            <div style="background:url(br.jpg) bottom right no-repeat">
                content
            </div>
        </div>
    </div>
</div>


Of course, you can simplify this if the div only grows on one axis:

<div style="background:url(top.jpg) top no-repeat">
    <div style="background:url(bottom.jpg) bottom no-repeat">
        content
    </div>
</div>
+1


a source


CSS does not support resizing the background image.

If you are only looking for rounded corners, there are many solutions available that use various combinations of HTML, CSS, and Javascript.



Google: rounded corners

0


a source


CSS 3 has a background-size property that will allow you to do this, but it is not supported in most browsers.

0


a source


Most modern browsers will allow you to traverse the corners of an element without resorting to background images. Check out the following CSS styles ...

-moz-border-radius:4px; 
border-radius:4px; 
-webkit-border-radius:4px;

Each will give you a 4 pixel radius. The first is in Mozilla browsers (like Firefox), the second is newer css3 browsers and the last is in Safari, etc.

0


a source






More articles:


All Articles