Cómo hacer una Div circular en Chrome?

Question

Tengo este div que actúa como lente en el acercamiento de la imagen. Pero el problema es que lo quiero circular. Estoy usando esto para que:

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

El problema es que hace que la circular div pero no oculta las esquinas de imagen que no forman parte del círculo y por lo tanto muestra un rectángulo.

El URL es: http://chokate.maninactionscript.com/chokates/

Haga clic en la imagen del desierto y luego ver la imagen grande en la derecha para efecto de zoom. Si le da al objetivo divborder 1pxsolid red, entonces puede ver que el div es realmente circular pero no oculta la parte inútil de las imágenes.

¿Alguna idea?

Answer 1

Si usted tiene una imagen dentro de un elemento que tiene border-radius conjunto, y que desea ocultar las "esquinas" de la imagen, es necesario establecer border-radius en la imagen para que coincida.

Pero en su caso eso no funcionará porque su imagen es mucho más grande que su elemento contenedor. Mejor es usar un <div> como lente y establecer background-image para que coincida con su imagen.

Demostración: 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; 
} 

Guión:

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

Salida:

Answer 2

OK, para canjearme, creo que esto se puede arreglar en Chrome anidando la imagen dentro de otra div. En Chrome, las esquinas redondeadas no ocultarán el desbordamiento si el div está absolutamente en posición, pero si coloca un div no especificado y aplica el css de esquina redondeada y establece el desbordamiento oculto, debería funcionar bien:

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

Algo similar aquí: How to make CSS3 rounded corners hide overflow in Chrome/Opera

Answer 3

En lugar de tener una imagen en esa lente div, intente aplicarla como imagen de fondo en el contenedor. Las imágenes de fondo parecen ser más amigables con radios de borde de Chrome que etiquetas de img.

Answer 4

El borde ES renderizado correctamente (puede verlo configurando el fondo en rojo y apagando la imagen) - el problema es que la imagen perfora. Creo que debes simplificar tu implementación. ¿Por qué no tener solo un div, con la imagen como fondo y sin div interior ni imagen? A partir de este código complicado, con todo lo que 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> 

Para

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

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

y tiene la JS cambiar el background-position y la parte superior/izquierda de los #lens elemento

Answer 5

Tiene un error con su implementación donde muestra el zoom anterior.

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