Tema: Problema con padding e imagen redonda
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 18/09/2012, 04:54
noruas
 
Fecha de Ingreso: junio-2012
Mensajes: 80
Antigüedad: 11 años, 10 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.