Recortar las esquinas de la imagen con el radio del borde establecido en la división principal no funciona en Safari

3 minutos de lectura

avatar de usuario
razz

Tengo una imagen colocada dentro de un div, el div tiene esquinas redondeadas que funciona como una máscara para ocultar las esquinas de la imagen y mostrarla como un círculo. ¡Funciona en todos los navegadores excepto en Safari! ¿alguien sabe como arreglarlo?

Lo intenté -webkit-padding-box, -webkit-mask-box-image pero ambos no funcionaron.

HTML:

<div class="cat"><img src="https://stackoverflow.com/questions/16553042/images/colorful-flowers-hd-wallpaper.jpg" /></div>

CSS:

.cat{
    width: 128px;
    height: 128px;
    margin: 20px 96px 0px 96px;
    position: relative;
    float: left;
    border-radius: 50%;
    overflow: hidden;
    border-top: 1px solid #111;
    border-bottom: 1px solid #fff;
    background: #fff;
    -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
}

.cat img{
    position: absolute;
    border: none;
    width: 138px;
    height: 138px;
    top: -8px;
    left: -8px;
    cursor: pointer;
}

violín

  • Relacionado y me ayudó a encontrar una solución (modificando directamente el img): stackoverflow.com/q/15167545/1066234 usando CSS object-fit:cover;

    – avatar

    11 de febrero de 2020 a las 13:41

  • ¿Responde esto a tu pregunta? Cómo hacer que las esquinas redondeadas de CSS3 oculten el desbordamiento en Chrome/Opera

    – Vega

    10 de agosto a las 8:17

  • @Vega, la pregunta es específica del navegador Safari.

    – razz

    14 ago a las 10:50

La mejor manera de evitar esto es especificando overflow: hidden; en el elemento padre.

  • ¡Qué solución tan sencilla! ¡Gracias!

    – Jacobo

    15 de junio de 2016 a las 10:16

Esto se debe al hecho de que el elemento principal tiene border-radius aplicado a él, pero la imagen no tiene ninguno. La imagen intenta desbordarse y, por lo tanto, anular el radio del borde aplicado en el elemento principal.

Solución simple:

Además de establecer la border-radius en el elemento principal, también debe agregar la siguiente regla CSS al img etiqueta:

img {
   border-radius: inherit;
}

Advertencia:

Si su imagen no se carga correctamente y aún desea que se aplique el radio del borde, es posible que el enfoque anterior no funcione y que deba usar la siguiente regla CSS en el elemento principal:

div {
   overflow: hidden;
}

Tenga en cuenta que overflow: hidden debe usarse con precaución, ya que puede interferir con otros pseudoelementos que pueda tener con respecto al elemento principal.

avatar de usuario
Volker E.

¿Con qué versión de Safari trabajas?

Varias explicaciones (poco satisfactorias) para ese problema: cómo hacer que las esquinas redondeadas de CSS3 oculten el desbordamiento en Chrome/Opera

tu estas sacando <img /> de flujo de contenido con position:absolute;. Al hacerlo, también debe cambiar su atributo de visualización a bloque. Entonces tiene sentido poner border-radius en img también.

Ver http://jsfiddle.net/Volker_E/LgYrz/

Nota: en Webkits muy antiguos (Safari -webkit-border-radius es necesario

avatar de usuario
Dave Everitt

Otra solución simple es agregar el border-radius propiedad a la img etiqueta también, y dale el mismo valor.

Por cierto, puedes usar HTML5 figure etiqueta para contener imágenes: no lo he probado en más de un par de navegadores por un tiempo, pero la última vez que lo hice todavía necesitaba el doble border-radius solución alternativa en un Firefox más antiguo.

¿Ha sido útil esta solución?