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

У меня есть этот 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 на самом деле круговой, но он не скрывает ненужную часть изображений.

Любые идеи?

Ответы

Ответ 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;
}

Script:

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 );
    }
} );

Вывод:

enter image description here

Ответ 2

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

Ответ 3

ОК, чтобы искупить себя, я думаю, что это можно зафиксировать в 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

Ответ 4

Граница IS отображается правильно (вы можете видеть, что, установив красный фон и отключив изображение), проблема заключается в том, что изображение пробивается. Я думаю, вам нужно упростить вашу реализацию. Почему бы просто не иметь один 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 изменит положение фона и сверху/слева от элемента #lens