Redondear una imagen css

Inicio » Redondear una imagen css

Recorte redondo de imágenes css

Sí, es así de simple. Como algunos de ustedes ya saben, normalmente usamos border-radius para crear esquinas redondeadas… Así que cuando hacemos un border-radius: 50%, literalmente convierte el contenedor (o imagen) en un círculo.

Como también habrás notado – CSS colocará, por defecto, la parte superior izquierda de la imagen como fondo. Se “cortará” de forma incómoda si la imagen está descentrada. Para arreglar esto, podemos reposicionarla manualmente usando background-position, y también, redimensionarla usando background-size.

Eso debería cubrir todo lo básico, pero ¿qué pasa si tenemos que lidiar con múltiples imágenes redondas? Como un pequeño extra, recomendaré poner todo lo “básico” en una clase CSS .rounded y especificar manualmente el background-image en el estilo inline.

Gracias por leer, y hemos llegado al final de esta guía. Espero que te haya ayudado con tu proyecto, y si quieres compartir algo con esta guía, no dudes en comentar abajo. ¡Buena suerte y feliz codificación!

Css image border color

In this tutorial, we’ll go over some CSS techniques for rendering circular <img> elements. The main CSS property responsible for the effect is border-radius. Though it’s quite simple to apply the effect to square images, rectangular images will require a little bit more extra work.

We then “crop out” the parts of the img element that go beyond the square wrapper div. We can carry this out by setting the wrapper div‘s overflow property to hidden. So that the subject of the photo is less likely to get cropped out, we also have to treat landscape photos (which are horizontally-oriented rectangles) differently from portrait photos (which are vertically-oriented rectangles).

.circular–landscape { display: inline-block; position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 50%; } .circular–landscape img { width: auto; height: 100%; margin-left: -50px; }

The width and height property values must be the same so that the wrapper div (.circular–landscape) renders as a square. In addition, the width and height property values must be equal to or less than the height of the img. This makes sure the img element is able to occupy the wrapper div without being stretched out.

Css redondear imagen sin estirar

Cuatro valores – border-radius: 15px 50px 30px 5px; (el primer valor se aplica a la esquina superior izquierda, el segundo a la esquina superior derecha, el tercero a la esquina inferior derecha y el cuarto a la esquina inferior izquierda):

W3Schools está optimizado para el aprendizaje y la formación. Los ejemplos pueden ser simplificados para mejorar la lectura y el aprendizaje. Los tutoriales, las referencias y los ejemplos se revisan constantemente para evitar errores, pero no podemos garantizar la total corrección de todo el contenido. Al utilizar W3Schools, usted acepta haber leído y aceptado nuestra

Css background-image

La propiedad CSS border-radius añade esquinas redondeadas en las imágenes. Puede redondear todas las esquinas de la imagen o sólo las seleccionadas, variar el radio en diferentes esquinas o mostrar una imagen en forma de óvalo o círculo.

Si quieres que las diferentes esquinas de tu imagen se redondeen de forma diferente entre sí, es posible orientarlas individualmente. En los ejemplos anteriores, cuando se declara un valor para el radio del borde, se aplica a todas las esquinas. Pero puede declarar cuatro valores diferentes para las distintas esquinas.

Ir arriba