En este post, vamos a revisar algunas técnicas para representar imágenes circulares con CSS, utilizando elementos <img>. La propiedad CSS principal responsable de este efecto es border-radius, y, al asimilar la teoría, ¡lleva tus imágenes a otro nivel!!!.
A pesar de que es muy simple aplicar este efecto, las imágenes rectangulares requieren un poco de trabajo extra, pero, aprenderás cóm hacer tal transfrmación.
Indice de contenido
Imágenes cuadradas
Los elementos img cuadrados (imágenes donde la dimensión de alto y ancho es la misma), sólo necesitan una línea de CSS. Este tipo de elementos son los más fáciles para crear imágenes circulares con CSS. A continuación el código:
HTML
<img class="model1" width="400" height="400" src="woman.png" />
CSS
.model1 {
border-radius: 50%;
}
Este CSS sería una forma de abreviar lo siguiente:
.model1 {
border-top-left-radius: 50% 50%;
border-top-right-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
border-bottom-left-radius: 50% 50%;
}
Mediante el establecimiento de todas las propiedades border-radius a 50% tanto de alto y ancho a un elemento img, terminamos con un img con forma de círculo:
Resultado: hemos podido formatear una imagen cuadrada con forma perfecta de círculo:
Reto: prueba a replicar en tu navegador la explicación anterior. Verás que no es complicado.
Imágenes rectangulares
Las imágenes rectangulares son un poco más complicadas para transformar a imágenes circulares con CSS.
Para que las imágenes no se desformen es recomendable que sean cuadradas y no rectangulares. Para hacer un círculo de un original de una imagen rectangular, la imagen debe comenzar como un cuadrado.
Ahora vamos a dar forma circular a la siguiente imagen cuyas medidas son: height: 580px; width: 400px; ¿cóm redondear esa imagen rectangular?.
Este problema es fácil de resolver si muestras la imagen como fondo de un elemento. Me explico: si tu código HTML original es algo así:
<img class="model2" src="woman.png">
Tienes que cambiarlo por algo así, para mostrar la imagen como fondo del elemento <div>:
<div class="model2" style="background-image: url(woman.png)"></div>
Y ahora ya sólo tienes que aplicar las siguientes reglas CSS para mostrar el <div> redondeado y con la imagen escalada manteniendo sus proporciones originales:
div.model2{
/* cambia estos dos valores para definir el tamaño de tu círculo */
height: 400px;
width: 400px;
/* los siguientes valores son independientes del tamaño del círculo */
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
background-size: 100% auto;
}
Resultado: hemos podido formatear una imagen originalmente rectangular, a una forma perfecta de círculo:
Insertar Imágenes en un texto
Después del maravilloso trabajo anterior, queda ahora darle la utilidad que le corresponde. Vamos a insertar la imagen model2 en un texto.
Código
<style>
div.model2 {
/* cambia estos dos valores para definir el tamaño de tu círculo */
height: 300px;
width: 300px;
/* los siguientes valores son independientes del tamaño del círculo */
background-repeat: no-repeat;
background-position: 50%;
border-radius: 50%;
background-size: 100% auto;
}
</style>
<div style="background:pink;float:left;display:inline;padding:20px;border:2px solid black">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis, ligula quis fermentum sollicitudin, ante ipsum ultrices est, nec laoreet justo risus a ipsum. Nulla sit amet accumsan diam. Sed non eros commodo, lobortis turpis ac, lacinia erat.
</br><div class="model2" style="float:left;display:inline;margin:10px 30px;background-image: url(https://blogmujeres.com//wp-content/uploads/2021/06/capelli-rossi-0-1000-108.jpg"></div>Quisque vehicula eros libero, non luctus eros blandit non. Sed id neque at ex egestas tincidunt vitae vitae mi. Aenean in mauris leo. Quisque diam ex, condimentum eu tempus dignissim, lacinia sit amet nisi. Aenean facilisis hendrerit molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lobortis imperdiet ultrices.</br>
Curabitur id lorem nec sem lacinia vehicula ac nec est. Sed eros leo, cursus vel metus vestibulum, sagittis venenatis nulla. Nunc eget tempus magna, et bibendum sem. Mauris eu accumsan enim. Aliquam egestas accumsan ex. Fusce vestibulum dolor nisl, ac feugiat nisi accumsan eu. Vestibulum vitae tellus ut massa lacinia eleifend. Donec nec ex sit amet erat pharetra viverra eu eu nisi. Morbi quis dui et nulla bibendum imperdiet at ac purus. Nulla sed pretium sapien. Praesent eu lectus mauris.</br>
Suspendisse enim felis, viverra ullamcorper lacus ut, molestie molestie neque. Curabitur dignissim nisl quis feugiat fringilla. Maecenas scelerisque, lorem porta aliquet viverra, eros odio efficitur elit, quis euismod sapien nisl sed elit. Sed tincidunt eu lectus et mattis. Morbi tempus porta dui sed posuere. Nulla placerat ipsum vitae nisi bibendum, nec vulputate ex congue.</br>
</div>
Clave: Se insertó al style originalmente trabajado, las tres siguientes instrucciones:
float:left.
Para posicionar la imagen a la izquierda
display:inline
Para posicionarla en la línea, y no en posición de bloque
margin:10px 30px.
Separación 10px (arriba-abajo) y 30px (derecha-izquierda)
Nunca dudes del poder del CSS para lograr cosas asombrosas, porque ¡con CSS hacemos que las cosas pasen!. Es el objetivo de estas publicaciones: desnudar ese poder: ¡Descúbrelo y ...úsalo!
