css - sistemas - tamaño de imagenes en wordpress

Firefox-moz-border-radius no recortará la imagen?

Question

¿Alguien sabe una manera de hacer que Firefox recorte las esquinas si se establece el radio del borde de una imagen? Está conteniendo elemento funcionará bien pero me salen esquinas feas.

¿Hay alguna manera de arreglar esto sin configurar la imagen como imagen de fondo o procesarla antes de ponerla en mi sitio?

Answer 1

Solución alternativa: establezca la imagen como fondo de un elemento contenedor y luego agregue un radio de borde en ese elemento.

Esto no funcionará a menos que la imagen sea exactamente del mismo tamaño que div. A menos que use la nueva propiedad CSS en Firefox 3.6 que permite el dimensionamiento de la imagen de fondo, pero casi nadie está en 3.6.

Así que estoy de acuerdo con Alex, eso es si haces que la imagen tenga el tamaño del div / otro olmo.

Answer 2

Creo que tengo la respuesta pero lo siento por mi inglés ... Resolví la pregunta poniendo otro div con borde y sin color de fondo sobre la imagen.

#imageContainer {
  -webkit-border-radius:10px
  -moz-border-radius:10px;
  z-index:1;
}
#borderContainer {
  position:absolute;
  border:1px solid #FFFFFF;
  -webkit-border-radius:10px
  -moz-border-radius:10px;
   z-index:10;
}

Answer 3

No creo que haya una forma de usar -moz-border-radius para redondear directamente una imagen en FireFox. Pero puedes simular las esquinas redondeadas a la manera antigua, con un marcado extra.

Entonces eso se ve así:

<div id="container">
  <img src="images/fubar.jpg" alt="situation normal" />
  <div class="rounded lt"></div>
  <div class="rounded rt"></div>
  <div class="rounded lb"></div>
  <div class="rounded rb"></div>
</div>

Entonces el CSS:

#container {position:relative;}
#container img {z-index:0;}
.rounded {position:absolute; z-index:1; width:20px; height:20px;}
.lt {background:url(''images/rounded_LT.png'') left top no-repeat;}
.rt {background:url(''images/rounded_RT.png'') right top no-repeat;}
.lb {background:url(''images/rounded_LB.png'') left bottom no-repeat;}
.rb {background:url(''images/rounded_RB.png'') right bottom no-repeat;}

Las imágenes de fondo de las esquinas se parecen a una luna creciente, con transparencia. Esta es una técnica espacial negativa, en la que permite que la imagen muestre dónde tienen transparencia las esquinas.

Las esquinas Div con fondos PNG-24 funcionarán muy bien. Si puede lidiar con las irregularidades, puede usar fondos GIF para IE6, o simplemente eliminar la imagen de fondo por completo para las esquinas cuadradas. Use los comentarios condicionales para servir el CSS a IE6.

Answer 4

Parece que Firefox recorta una imagen de fondo, por lo que si configura una imagen de fondo h1 y aplica un radio de borde a esa, se recortará. (solo verificado en FF 3.6.12)

Answer 5

Si usa desbordamiento: oculto, no mostrará las esquinas de la imagen sobresaliendo.

Quién sabe, todavía podrían estar allí, simplemente ocultos.

Answer 6

Solución alternativa: establezca la imagen como fondo de un elemento contenedor y luego agregue un radio de borde en ese elemento.

Answer 7

¿No se recorta si aplica el radio del borde directamente al elemento img ? Se conocen problemas con -moz-border-radius en lo que respecta al contenido contenido .

--editar

OK, tampoco recorta img . Si su imagen es una especie de PNG / GIF sobre un fondo sólido, es posible que pueda hacer algo como esto:

img {
    border: 10px solid white;
    -moz-border-radius: 10px;
}

Pero si intenta obtener esquinas redondeadas en una foto, entonces no va a funcionar en 3.5.

Answer 8

.round_image_borders {

    position:relative; // fix for IE8(others not tested)
    z-index:1; // fix for IE8(others not tested)
    width:114px;
    height:114px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    behavior:url(border-radius.htc); // fix for IE8(others not tested)
}

Obtuve el script "border-radius.htc" desde este enlace:

http://code.google.com/p/curved-corner/

Lo que hace agrega soporte para esquinas redondas para IE8. También tuve que establecer la posición: relativa e índice z, porque de lo contrario el div (y la imagen de fondo) se mostrarían debajo del contenedor div deseado en el que se colocaba el contenedor (round_image_borders) div.

Esto funciona para:

FF 3.6.16

IE 8

Chrome 12.0

Y sí, la imagen debe tener el mismo tamaño que el div con la clase round_image_borders. Pero esta solución alternativa debe utilizarse con imágenes que tengan el mismo tamaño.

Answer 9

img {
 overflow: hidden;

 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -o-border-radius: 10px;
 -ms-border-radius: 10px;
 border-radius: 10px;
}