Как сделать круговой Div в Chrome?

Question

У меня есть div, который действует как объектив при масштабировании изображения.Но проблема в том, что я хочу, чтобы это было круглым.Я использую это для этого:

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

Проблема в том, что он делает div круглым, но не скрывает углы изображения, которые не являются частью круга и, следовательно, показывает прямоугольник.

URL-адрес: http://chokate.maninactionscript.com/chokates/

Нажмите на изображение пустыни, а затем увидите увеличенное изображение справа для эффекта увеличения.Если вы дадите объектив div border 1px solid red, вы увидите, что div на самом деле круглая, но она не скрывает бесполезную часть изображений.

Есть идеи?

Answer 1

Если у вас есть изображение внутри элемента, для которого установлено border-radius, и вы хотите скрыть «углы» изображения, вам нужно установить border-radius на изображении, чтобы оно соответствовало.

Но в вашем случае это не сработает, потому что ваше изображение намного больше, чем ваш содержащий элемент.Лучше использовать <div> в качестве объектива и установить background-image в соответствии с вашим изображением.

Демонстрация: http://jsfiddle.net/ThinkingStiff/wQyLJ/

HTML:

<div id="image-frame">
<img id="image" src="http://thinkingstiff.com/images/matt.jpg" />
<div id="lens" ></div>
<div>

CSS:

#image-frame {
    position: relative;
}

#lens {
    background-repeat: no-repeat;
    border-radius: 150px;
    height: 150px;
    position: absolute;
    width: 150px;
}

Сценарий:

document.getElementById( 'image-frame' ).addEventListener( 'mousemove', function ( event ) {

    var lens = document.getElementById( 'lens' ),
        image = document.getElementById( 'image' ),
        radius = lens.clientWidth / 2,
        imageTop = this.documentOffsetTop,
        imageLeft = this.documentOffsetLeft,
        zoom = 4,
        lensX = ( event.pageX - radius - imageLeft ) + 'px',
        lensY = ( event.pageY - radius - imageTop ) + 'px',
        zoomWidth = ( image.clientWidth * zoom ) + 'px',
        zoomHeight = ( image.clientHeight * zoom ) + 'px',
        zoomX = -( ( ( event.pageX - imageLeft ) * zoom ) - radius ) + 'px',
        zoomY = -( ( ( event.pageY - imageTop ) * zoom ) - radius ) + 'px';

    if( event.pageX > imageLeft + image.clientWidth 
        || event.pageX < imageLeft
        || event.pageY > imageTop + image.clientHeight 
        || event.pageY < imageTop  ) {

        lens.style.display = 'none';

    } else {

        lens.style.left = lensX;
        lens.style.top = lensY;
        lens.style.backgroundImage = 'url(' + image.src + ')';
        lens.style.backgroundSize = zoomWidth + ' ' + zoomHeight;
        lens.style.backgroundPosition = zoomX + ' ' + zoomY;
        lens.style.display = 'block';

    };

}, false );

window.Object.defineProperty( Element.prototype, 'documentOffsetTop', {
    get: function () { 
        return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    }
} );

window.Object.defineProperty( Element.prototype, 'documentOffsetLeft', {
    get: function () { 
        return this.offsetLeft + ( this.offsetParent ? this.offsetParent.documentOffsetLeft : 0 );
    }
} );

Вывод:

Answer 2

Вместо того, чтобы иметь изображение в этом объективе, попробуйте применить его в качестве фонового изображения на контейнере. Фоновые изображения выглядят более дружелюбными с Chrome border-radii, чем теги img.

Answer 3

Граница отображается правильно (вы можете увидеть это, установив фон на красный и выключив изображение) - проблема в том, что изображение будет пробиваться.Я думаю, что вам нужно упростить вашу реализацию.Почему бы просто не иметь один div, с изображением в качестве фона, без внутреннего div или изображения.Из этого сложного кода со всеми этими CSS

<div style="position: absolute;
    overflow-x: hidden;
    overflow-y: hidden;
    width: 200px;
    height: 200px;
    left: 971px;
    top: 311px;
    display: none; ">
    <div style="position: relative;
             border-top-left-radius: 200px 200px;
             border-top-right-radius: 200px 200px;
             border-bottom-right-radius: 200px 200px;
             border-bottom-left-radius: 200px 200px;
             left: -934px; top: 716px; ">
          <img src="/img/rsz_desert_mid.jpg" style="width: 660px; height: 548px; ">
     </div>
 </div>

К

<div id="lens" style="background-position: -513px -12px; top: 100px; left : 100px;"></div>

с помощью css

#lens {
    background-image : url( .... );
    background-repeat: no-repat;
    width : 200px;
    height : 200px;
    border-radius : 200px;
    -mox-border-radius : 200px;
    -webkit-border-radius : 200px;
    position : absolute;
 }

и JS изменяют background-position и top/ слева от элемента #lens

Answer 4

ОК, чтобы выкупить себя, я думаю, что это можно исправить в chrome, вложив изображение в другой div.В Chrome закругленные углы не будут скрывать переполнение, если div является абсолютно позиционным, но если вы поместите неопределяемый div и примените к нему округленный угол css и установите переполнение скрытым, это должно работать нормально:

<div style='position:absolute'>
   <div style='-webkit-border-radius:999px;-moz-border-radius:999px;border-radius:999px;overflow:hidden'>
      <img src='' />
   </div>
</div>

Здесь что-то похожее: Как сделать, чтобы закругленные углы CSS3 скрывали переполнение в Chrome / Opera

Answer 5

У вас есть ошибка с вашей реализацией, когда она показывает предыдущий масштаб.

глючный зум http://www.vertigrated.com/images/buggyzoom.png