HTML y CSS Fluid Circle

Estoy tratando de crear un círculo fluido usando HTML y CSS. Ya casi termino, pero como debe ser fluido y el contenido interior es dynamic, está cambiando su forma de círculo a óvalo y otros.

body { position: relative; } .notify { position: absolute; top: 100%; left: 20%; background: red; border: 2px solid white; border-radius: 50%; text-align: center; } .notify > div { padding: 20px; } 
 
12

¿Puedes ayudarme por favor?

El border-radius:50% pirateo que estás utilizando supone que el

es cuadrado antes de que se apliquen las esquinas redondeadas, de lo contrario producirá un óvalo en lugar de un círculo, exactamente como habrás notado.

Por lo tanto, si desea que el círculo permanezca circular a medida que se expande el contenido, debe ajustar dinámicamente la altura para que coincida con el ancho. Probablemente necesites usar Javascript para lograr esto.

Además, tenga en cuenta que border-radius no es compatible con las versiones anteriores de IE, por lo que los usuarios con IE6, IE7 o IE8 no verán su círculo en absoluto. (aunque hay un truco llamado CSS3Pie )

Por supuesto, ajustar la height tendrá el efecto secundario de hacer que el elemento ocupe más espacio verticalmente. Esto puede no ser lo que quieres; es posible que desee que el círculo tenga el mismo tamaño independientemente del contenido que contenga. En este caso, debe corregir el alto y el ancho del círculo, y dar la position:absolute; del contenido position:absolute; para evitar que afecte el tamaño de su padre.

Una alternativa al uso del hack de border-radius para producir un círculo sería usar SVG. SVG es un formato de gráficos vectoriales que está integrado en la mayoría de los navegadores.

Una vez más, la notable excepción es IE8 y versiones anteriores, pero IE admite un formato alternativo llamado VML. Existen varios scripts que pueden convertir entre SVG y VML, por lo que puede generar una solución de navegador cruzado con SVG más Javascript.

Si vamos a aceptar que el Javascript es parte de la solución, simplemente podría usar una biblioteca de JavaScript para dibujarlo en primer lugar. Mi sugerencia para esto sería Raphael , que genera gráficos SVG o VML de acuerdo con el navegador que lo está ejecutando.

Espero que ayude.

Debe establecer el width y el height al máximo de estos dos, para representar un cuadrado, que con esquinas de 50% de radio, da como resultado un círculo.

Puedes hacer esto en jQuery:

 $(function() { var $elem = $(".notify > div"); var maxSize = Math.max($elem.width(), $elem.height()); $elem.width(maxSize).height(maxSize); }); 

Intenta cambiar el contenido (tanto en ancho como en alto) aquí

Ejemplo de un círculo fluido usando solo HTML y CSS. Como mencioné en mis comentarios a la pregunta, la técnica se explica en mi blog . También como se mencionó, Safari actualmente no juega bien con un radio de borde especificado como un porcentaje.

Tal como lo hizo Jose Rui Santos , puedes lograr tu objective. Pero haz algunos cambios en tu CSS.

Como eliminar el relleno de .notify > div y agregar estilos como este:

 .notify > div { display: table-cell; vertical-align: middle; } 

y agrega relleno en la clase .notify como esta:

 .notify { position: absolute; top: 100%; left: 20%; background: red; border: 2px solid white; border-radius: 50%; padding: 30px; text-align: center; } 

y el código de Jquery mencionado por Jose Rui Santos :

 var $elem = $(".notify > div"); var maxSize = Math.max($elem.width(), $elem.height()); $elem.width(maxSize).height(maxSize); 

Vea la demostración funcional: http://jsfiddle.net/2j5Ek/63/

Forzar su altura y peso max-width:XXpx; max-height:XXpx estableciendo max-width:XXpx; max-height:XXpx max-width:XXpx; max-height:XXpx hará el trabajo.

Tenga en cuenta que es posible que necesite usar CSS3 word-wrap: break-word; para romper las palabras La compatibilidad entre navegadores puede ser un problema.

necesita una forma de imponer la altura / ancho, de lo contrario se volverá oval … ¡es posible!

en este html

 
12334

este script de jQuery debería hacerlo …

 var cw = $('.child').width(); $('.child').css({ 'height': cw + 'px', 'line-height': cw + 'px' }); 
    Intereting Posts