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

Question

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

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

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

URL-адрес является: http://chokate.maninactionscript.com/chokates/

Нажмите на пустынной картинке, а затем увидеть больше, изображение справа для увеличения эффекта. Если вы дадите объектив divborder 1pxsolid 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

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

Нечто похожее здесь: How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 3

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

Answer 4

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

Answer 5

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

buggy zoom http://www.vertigrated.com/images/buggyzoom.png