Сжать изображение с помощью JavaScript

Question

Мне нужно сжать изображение, которое было сохранено в div background-image, используя javascript. Для этого изображения сторона четыре имеет закругленный угол.

Возможно ли это в javascript?

есть предложения?

Answer 1

Вы не можете изменить размер фона с помощью JS.

Вы можете разделить изображение на 4 угловых изображения и объединить их, чтобы показать все:

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

Конечно, вы можете упростить, что если ваш div растет только по одной оси:

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

Answer 2

Большинство современных браузеров позволяют вам закруглять углы элемента, не прибегая к фоновым изображениям. Проверьте следующие стили CSS ...

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

Каждый из них даст вам радиус 4 пикселя. Первый в браузерах Mozilla (например, Firefox), второй - более новые браузеры css3 и последний в Safari и др.

Answer 3

CSS 3 имеет свойство background-size, которое позволяет вам это делать, но оно не поддерживается в большинстве браузеров.

Answer 4

CSS не поддерживает изменение размера фонового изображения.

Если вы просто ищете закругленные углы, существует большое разнообразие доступных решений, в которых используются различные комбинации HTML, CSS и Javascript.

Google: закругленные углы