Могу ли я масштабировать элемент с помощью CSS-преобразований и при этом оставаться в содержащем элементе? - PullRequest
Новая
       9

Могу ли я масштабировать элемент с помощью CSS-преобразований и при этом оставаться в содержащем элементе?

1 голос
/ 25 марта 2010

У меня есть изображение внутри div. Я масштабирую изображение с помощью CSS-преобразования, которое в 2,5 раза превышает его первоначальный размер. Это работает, но оно перекрывает содержащий div. Я хочу, чтобы это оставалось внутри содержимого div, это возможно? 

<html>

<script language="javascript">    
    function zoom()
    {
        var myLayer = document.getElementById('layer');
        var myPhoto = document.getElementById('photo');

        myPhoto.style["-webkit-transform-origin"] = "50% 50%";
        myPhoto.style["-webkit-transform"] = "scale(2.5)";
    }

</script>

<body onload="zoom();">

<div id ="layer" style="height:700px; width:1000px; background-color:yellow;  text-align: center; vertical-align: middle;" onClick="javascript:toggleZoom();"><img id="photo" src="http://farm1.static.flickr.com/42/77156587_fa5aef2c4c_o.jpg" width="500" height="332"></div>

</body>
</html>

Ответы [ 3 ]

8 голосов
/ 25 марта 2010

Вы пробовали просто поместить переполнение: скрытое в содержащий div?

2 голосов
/ 25 марта 2010

Возможно использование маски CSS (http://webkit.org/blog/181/css-masks/) с изображением прямоугольника SVG, масштабированным до соответствующего размера?

1 голос
/ 25 марта 2010

Установите CSS для изображения на 

#image
{
    width: 100%;
}

и все.

Я делаю то же самое здесь для галереи изображений:

http://www.k9listener.com/gallery.html

...