Foros del Web » Creando para Internet » CSS »

Problema con padding e imagen redonda

 Estas en el tema de Problema con padding e imagen redonda en el foro de CSS en Foros del Web. Os comento una cuestión que me está quitando el sueño respecto a la manera en la que se visualiza el padding de una imagen redondeada ...
  #1 (permalink)  
Antiguo 10/09/2012, 15:00
Avatar de jpa
jpa
 
Fecha de Ingreso: diciembre-2011
Ubicación: A Coruña
Mensajes: 10
Antigüedad: 13 años
Puntos: 2
Pregunta Problema con padding e imagen redonda
Os comento una cuestión que me está quitando el sueño respecto a la manera en la que se visualiza el padding de una imagen redondeada con css3

Os pongo en antecedentes.

Estoy desarrollando una web en la que utilizo una imágen representativa de cada producto. Parto de una imágen cuadrada a la que le aplico la siguiente clase para redondearla (es la que está incluida en el bootstrap de twitter):

Código CSS: 
Ver original
  1. .img-circle {
  2.   -webkit-border-radius: 50%;
  3.   -moz-border-radius: 50%;
  4.   border-radius: 50%;
  5. }

y me queda algo así:



Luego le aplico una sombra que, aunque no viene mucho al caso lo hago con

Código CSS: 
Ver original
  1. .img-shadow {
  2.  box-shadow: rgba(0,0,0,.5) 0.25em -0.25em 0.5em 0.04em; 
  3. }

Y por último aplico un padding para crear un marco blanco:

Código CSS: 
Ver original
  1. .img-borde {
  2. padding: 3%;
  3. }

En Firefox esto se aplica perfectamente y se ve algo así:



Pero en Safari el 3% de padding lo aplica a la imagen sin redondear, con lo cual el resultado es algo como:



Admito sugerencias, soluciones... pero que no pasen por aplicar varias imagenes para simular la sombra ni photoshop, ni... en fin, que me gustaría hacerlo con css3 (que para eso lo publico en este foro )

El primero que encuentre la solución se puede apuntar el gallifante.

Muchas gracias de antemano a todos.
  #2 (permalink)  
Antiguo 12/09/2012, 05:37
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
Yo jugando un poco con valores y metiendo la imagen en un div he conseguido algo parecido, funciona en IE(activando la compativilidad con I9), FF, Safari y Chrome... Pero no en Opera. Pero tu lo que querias era Safari :P

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body{
  5.     background-color: #F9C;}
  6. img { /* Mi imagen de ejemplo mide 200px por 200px */
  7.       -webkit-border-radius: 50%;
  8.       -moz-border-radius: 50%;
  9.       border-radius: 50%;
  10.     }
  11. div {
  12.       margin: 100px;
  13.       padding: 5px;
  14.       background-color:#FFF;
  15.       -webkit-border-radius: 50%;
  16.       -moz-border-radius: 50%;
  17.       border-radius: 50%;
  18.       width: 200px;
  19.       box-shadow:5px 5px 15px #999;
  20.     }
  21. </style></head>
  22. <body>
  23. <div>
  24. <img src="ejemplo.png" />
  25. </div>
  26. </body>
  27. </html>

A ver si te sirve.
  #3 (permalink)  
Antiguo 16/09/2012, 14:34
Avatar de jpa
jpa
 
Fecha de Ingreso: diciembre-2011
Ubicación: A Coruña
Mensajes: 10
Antigüedad: 13 años
Puntos: 2
Respuesta: Problema con padding e imagen redonda
Muchas gracias por tu respuesta noruas, y perdona por no responder antes.

Me a gustado la idea, más que nada por su sencillez en la solución.

Aplicar el borde a la capa y no al contenido me parece una solución muy imaginativa. El gallifante para ti

Sin embargo, para el caso que me ocupa no resulta óptimo. Se trata de una web 'responsive' por lo que el ancho de la capa que lo contiene varía de tamaño. Así, al aplicar el borde blanco a la capa y no a la imágen, el borde a veces será una sombra ovalada tras la imágen, (pues no siempre tendrá proporción cuadrada.

"Para muestra un botón"




Aún me quedan más gallifantes (por si a alguien se le ocurre la solución en versión "responsive"
  #4 (permalink)  
Antiguo 17/09/2012, 00:55
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
En cuanto vuelva del curro me pongo a ello. La verdad es que lo pense, pero no me puse a ello en su momento. A ver que saco.
  #5 (permalink)  
Antiguo 18/09/2012, 04:54
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
Pues mira, he sacado esto otro que va en % pero tiene la pequeña pega de que deforma la imagen....

Soluciones... Hay 3.

1º Poner el height del container en proporción al aspect ratio de la pantalla... Como te he dejado yo en el css... Obiamente eso no serviria de mucho por que cada uno tiene un ratio distinto de pantalla.

2º Vía js o similar sacar el ancho al que esta siendo visualizado el "boxContainer" e imprimir ese valor como height del propio boxContainer para que así tenga el mismo alto que ancho...

3º Vía método que apareció en unos post abajo de la mano de "Bonez" que he adapatado a este menester.

Yo te recomiendo hacerlo con el 2º método, sacas el ancho al que esta en ese momento el boxContainer y que ponga el height al mismo tamaño y entonces la imagen quedara siempre sin deformarse. El 3º método va muy bien, pero es mas fluido y elegantes con js... Pero obiamente pierdes accesibilidad. Podrías usar los dos, usas js y si el navegador del que visualiza la web no tiene js entonces cargas esta segunda hoja de estilos.

No te digo como se haría con js porque no tengo ni papa de ello :P, pero seguro que si sabes usar js o conoces a alguien que sepa no tardaras ni 5 min en hacer lo que digo xD.

1º método:
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {
  5.     background-color: #F9C;
  6. }
  7. #boxContainer {
  8.     width: 100%;
  9.     /*height: 177%;*/
  10.     margin: 0 auto;
  11. }
  12. #box {
  13.     padding: 1%;
  14.     background-color:#FFF;
  15.     -webkit-border-radius: 50%;
  16.     -moz-border-radius: 50%;
  17.     border-radius: 50%;
  18.     box-shadow:5px 5px 15px #999;
  19.     
  20.     width: 50%;
  21.     max-width:600px;
  22.     min-width:100px;
  23.     
  24.     height: 50%;
  25.     max-height:600px;
  26.     min-height:100px;
  27. }
  28. #box img {
  29.     -webkit-border-radius: 50%;
  30.     -moz-border-radius: 50%;
  31.     border-radius: 50%;
  32.     height:100%;
  33.     width:100%;
  34. }
  35. </style>
  36. </head>
  37. <body>
  38. <div id="boxContainer">
  39.   <div id="box"><img src="1.png" /></div>
  40. </div>
  41. </body>
  42. </html>

3º método:
Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. body {
  5.     background-color: #F9C;
  6. }
  7. #container {
  8.     width: 100%;
  9.     margin: 0 auto;
  10. }
  11. #box {
  12.     padding: 1%;
  13.     background-color:#FFF;
  14.     -webkit-border-radius: 50%;
  15.     -moz-border-radius: 50%;
  16.     border-radius: 50%;
  17.     box-shadow:5px 5px 15px #999;
  18.     width: 100%;
  19.     height: 100%;
  20. }
  21. #box img {
  22.     -webkit-border-radius: 50%;
  23.     -moz-border-radius: 50%;
  24.     border-radius: 50%;
  25.     height:100%;
  26.     width:100%;
  27. }
  28. #boxContainer {
  29.     width: 100%;
  30.     height: 100%;
  31. }
  32. @media (max-width:2000px) {
  33.    #boxContainer {
  34.     width: 1000px;
  35.     height: 1000px;
  36.     }
  37. }
  38. @media (max-width:1900px) {
  39.    #boxContainer {
  40.     width: 950px;
  41.     height: 950px;
  42.     }
  43. }
  44. @media (max-width:1800px) {
  45.    #boxContainer {
  46.     width: 900px;
  47.     height: 900px;
  48.     }
  49. }
  50. @media (max-width:1700px) {
  51.    #boxContainer {
  52.     width: 850px;
  53.     height: 850px;
  54.     }
  55. }
  56. @media (max-width:1600px) {
  57.    #boxContainer {
  58.     width: 800px;
  59.     height: 800px;
  60.     }
  61. }
  62. @media (max-width:1500px) {
  63.    #boxContainer {
  64.     width: 750px;
  65.     height: 750px;
  66.     }
  67. }
  68. @media (max-width:1400px) {
  69.    #boxContainer {
  70.     width: 700px;
  71.     height: 700px;
  72.     }
  73. }
  74. @media (max-width:1300px) {
  75.    #boxContainer {
  76.     width: 650px;
  77.     height: 650px;
  78.     }
  79. }
  80. @media (max-width:1200px) {
  81.    #boxContainer {
  82.     width: 600px;
  83.     height: 600px;
  84.     }
  85. }
  86. @media (max-width:1100px) {
  87.    #boxContainer {
  88.     width: 550px;
  89.     height: 550px;
  90.     }
  91. }
  92. @media (max-width:1000px) {
  93.    #boxContainer {
  94.     width: 500px;
  95.     height: 500px;
  96.     }
  97. }
  98. @media (max-width:900px) {
  99.    #boxContainer {
  100.     width: 450px;
  101.     height: 450px;
  102.     }
  103. }
  104. @media (max-width:800px) {
  105.    #boxContainer {
  106.     width: 400px;
  107.     height: 400px;
  108.     }
  109. }
  110. @media (max-width:700px) {
  111.    #boxContainer {
  112.     width: 350px;
  113.     height: 350px;
  114.     }
  115. }
  116. @media (max-width:600px) {
  117.    #boxContainer {
  118.     width: 300px;
  119.     height: 300px;
  120.     }
  121. }
  122. @media (max-width:500px) {
  123.    #boxContainer {
  124.     width: 250px;
  125.     height: 250px;
  126.     }
  127. }
  128. @media (max-width:400px) {
  129.    #boxContainer {
  130.     width: 200px;
  131.     height: 200px;
  132.     }
  133. }
  134. @media (max-width:300px) {
  135.    #boxContainer {
  136.     width: 150px;
  137.     height: 150px;
  138.     }
  139. }
  140. @media (max-width:200px) {
  141.    #boxContainer {
  142.     width: 100px;
  143.     height: 100px;
  144.     }
  145. }
  146. </style>
  147. </head>
  148. <body>
  149. <div id="container">
  150.  <div id="boxContainer">
  151.   <div id="box"><img src="1.png" /></div>
  152.  </div>
  153. </div>
  154. </body>
  155. </html>

Espero que te sirva. Saludos.
  #6 (permalink)  
Antiguo 19/09/2012, 03:28
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 11 meses
Puntos: 306
Respuesta: Problema con padding e imagen redonda
Hola, interesante para practicar un poco.
Te dejo mi propuesta, que se diferencia en que uso las imágenes como fondo (lo cual no sería muy correcto si es una imagen importante como un producto), y efectos css3.
A tener en cuenta que back-size no es soportado por todos los navegadores.

Código HTML: 
Ver original
  1. <html>
  2. <head>
  3. ....
  4. </head>
  5. <body>
  6. <div id="producto1" class="producto"></div>
  7. <div id="producto2" class="producto"></div>
  8. <div id="producto3" class="producto"></div>
  9. </body>
  10. </html>

Código CSS: 
Ver original
  1. body{
  2.     background-color: #F9C;}
  3.  
  4.  
  5. .producto{
  6.     background-color:#FFF;
  7.     background-repeat:no-repeat;
  8.     background-position:center;
  9.     background-size:100% 100%; /*solo navegadores avanzados */
  10.     
  11.     border:8px solid #FFF;
  12.     border-radius: 50%;
  13.     box-shadow:5px 5px 15px #666;
  14.     
  15.     float:left;
  16.     
  17.     margin: 10px auto;
  18.     
  19.     width:500px;
  20.     -webkit-border-radius: 50%;
  21.     -moz-border-radius: 50%;
  22.     
  23.     -webkit-transition: all 2s ease-in-out;
  24.     -moz-transition: all 2s ease-in-out;
  25.     -o-transition: all 2s ease-in-out;
  26.     -ms-transition: all 2s ease-in-out; 
  27.     transition: all 2s ease-in-out;
  28. }
  29.  
  30. @media screen and (max-width: 399px){   
  31. .producto{ height:120px; width:120px;float:none;}
  32.  
  33. #producto1 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
  34. #producto2{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
  35. #producto3 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
  36. }
  37.  
  38.  
  39. @media screen and (min-width:400px ) and (max-width: 800px){
  40.     
  41. .producto{ height:250px; width:250px; float:none;}
  42.  
  43. #producto1 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
  44. #producto3{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
  45. #producto2 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
  46.  
  47. }
  48.  
  49. @media screen and (min-width:801px ){
  50. .producto{ height:350px; width:350px;}
  51.  
  52. #producto1{ background-image:url('imagen_novedad/ajedrez_528_528.jpeg'); }
  53. #producto2 {background-image:url('imagen_novedad/borracho_752.jpeg'); }
  54. #producto3 { background-image:url('imagen_novedad/minis/m_2deabril_732.jpeg'); }
  55.  
  56. }


Hablando responsive-design, definí tres instancias, y además tres productos, para que tengas un ejemplo de como aplicarlo a más de uno. Por eso hago uso de los id y de class.
Es 100% posible que esto sea una chapuza, pero creo que funciona.

Te dejo un enlace donde podrás verlo, pero ten en cuenta que lo dejaré cuanto mucho una semana.

Para ver como funciona no tienes más que achicar la ventana del navegador.
Probado en Chrome, FF, Opera, Safari, IE9, donde +- funciona.

Saludos
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #7 (permalink)  
Antiguo 19/09/2012, 07:45
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
Magnífico el método C2am, llevo toda la mañana trasteando con el, me encata ^^. Muy original.
  #8 (permalink)  
Antiguo 23/09/2012, 13:55
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Problema con padding e imagen redonda
¿Y traer la imagen con el borde incluído?

http://www.pepemolina.com/?titulo=Marcos+ovalados

http://www.pepemolina.com/?titulo=Ma...+configurables
  #9 (permalink)  
Antiguo 23/09/2012, 23:27
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
Eso seria hacer "trucos" con imagenes que es una de las premisas que el autor del post no queria, al menos si he entendido bien tu rerspuesta Furoya.
  #10 (permalink)  
Antiguo 24/09/2012, 08:11
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Problema con padding e imagen redonda
Quizá lo que no entendiste bien es la pregunta.

Cita:
Iniciado por jpa
Estoy desarrollando una web en la que utilizo una imágen representativa de cada producto. Parto de una imágen cuadrada ... Admito sugerencias, soluciones... pero que no pasen por aplicar varias imagenes para simular la sombra ni photoshop, ni... en fin, que me gustaría hacerlo con css3 (que para eso lo publico en este foro )
Está muy lindo el desafío de corregir bugs y errores de interpretación en los navegadores (hasta que ellos mismos los corrijan). C2am ensayó una solución que justifica el post.
Lo que no está de más es explicar cómo se hace realmente. Porque ¿estás seguro de que jpa conoce PHP, y que por algún motivo que no sea caprichoso se niega a bajar las imágenes ya redondas y con borde? ¿O solamente sabrá CSS y trata de arreglarse con lo que tiene a mano?
Ni siquiera, porque vino acá para que se lo hagamos por él.

De cualquier forma, si baja imágenes cuadradas, puede bajarlas redondas, y si quiere acomodarlas en el documento (hasta con sombra) lo puede hacer con CSS3.
No hay nada fuera de la "premisa" original.

Y por supuesto, tampoco sé si yo iba a publicar la sugerencia antes de la solución CSS3. Seguramente, no, porque trato de respetar las condiciones originales ... siempre que se puede.
  #11 (permalink)  
Antiguo 24/09/2012, 08:41
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 12 años, 6 meses
Puntos: 11
Respuesta: Problema con padding e imagen redonda
El objetivo del post era precisamente ese xD... Si no hubiera querido hacerlo de esta forma no creo que hubiera tenido que preguntar como se hace una imagen redonda con el PS

Sepa o no sepa php, sepa o no sepa usar el PS, no viene a cuento, el objetivo aqui era hacerlo solo con css y que se visualizara en Safari, nada mas ni nada menos.

PD: No creo que viniera aqui el autor del post ha que le hicieramos el trabajo, el ya tenia planteado el css de partida y lo que habia conseguido, si pidio ayuda fue por que no sabia como alcanzar un objetivo tan particular. Y para eso estamos aqui ¿no?
  #12 (permalink)  
Antiguo 25/09/2012, 14:27
(Desactivado)
  
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes
Puntos: 317
Respuesta: Problema con padding e imagen redonda
(¿Y el emoticón de "aburrido"? ¡Ah, sí, éste estaba!)



No sé si vale la pena seguir con esto. Estoy tratando de inventar algo que aporte al tema para justificar el post, porque responder a tus planteos no sirve de nada; pero en fin, las ideas ya están todas escritas, faltaba la que puse yo, nada más.

Para empezar, la respuesta que hubiese dado (si hubiese tenido la cuenta activada en ese momento) era la misma que pusiste en tu primer mensaje. La objeción, es que jpa no lo quiere para Safari, sino además, para Safari.

Lo que se me ocurre ahora, es que debió aclarar desde el comienzo lo de la web responsiva. Y aquí es donde tengo problemas para colaborar, porque ni tengo instalado un Safari, ni tengo idea de cómo es una web responsiva.
Entiendo que hace ajustes en el documento para simular que es un imprimible, y que acomode las capas manteniendo cierta coherencia en el diseño. Y supongo que los métodos para hacer eso son algún CSS tipo mediaquery, o lisa y llanamente la reescritura de estilos vía javascript.

El primer caso es difícil de resolver; no podemos meternos en la interpretación que haga el navegador de los valores que le asignamos al documento. Si no lo hace como nosotros queremos : "agua, resina y ajo". Los hacks son temporales y no podemos confiar en ellos fuera de una página experimental.

Si es con JS, entonces lo podemos modificar. Es evidente por la captura que hay más arriba que a las imágenes no las redimensiona. Con agregar una excepción a una clase (p.e.) noresize tal como tiene la etiqueta <img> está resuelto el problema, A todas las cajas de "borde" se le agrega class="miclase noresize" y las va a ignorar en cuanto a responsivarlas.

Pero creo (sospecho, supongo) que eso ya debe estar previsto por el creador del *.js que se linkea para hacer el ajuste. Habría que buscar la documentación. Muy probablemente nos encontremos que hay elementos que no modifica, porque son inline como el <span> o por cualquier otro motivo. Si no tienen ganas de buscar, supongo que pueden hacer alguna prueba empírica.


Bien, ahora sí, vamos con tu asunto, noruas.
El "objetivo del post" ya me nefrega tres pitos. Si en verdad se le resolvió (y así parece, porque como veo, el autor no regresó) mi pregunta estaba perfectamente ubicada. Eso se llama "aporte".

Y que haya venido a que le solucionáramos su problema es una anécdota. Los temas se publican para colaborar con el Foro, así que vamos a poner alternativas (que le sirvan a jpa o no, es lo de menos) para que quien caiga usando un buscador no se vaya a otro sitio porque aquí se "soluciona" un asunto puntual en vez de aprovechar el tema y convertirlo en un "tutorial", como ya hemos hecho con varios desde siempre.

No te digo que sigás colaborando, pero al menos no empecés ahora a discutirme de gusto.

Etiquetas: css3, padding, redondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:51.