Me gustaría poder rodear elementos en una página web usando solo CSS. Tengo un código que casi funciona: produce un círculo alrededor del elemento pero
- el ancho no coincide con el ancho del contenido (siempre es demasiado grande), y
- Parece que no puedo centrarlo en la niña.
El siguiente código es el que tengo actualmente
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>MWE</title>
</head>
<body>
<style>
div.ccc {
display: run-in;
position: relative;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
</style>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" width="10%">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</body>
Que produce lo siguiente. Tenga en cuenta que los círculos no están centrados en las imágenes y los anchos están apagados.
¿Es posible arreglar eso usando solo CSS?
2 respuestas
Configure el div para mostrar: inline-block y funcionará.
Los Divs son elementos de nivel de bloque por defecto, lo que significa que tomarán el 100% del ancho.
Editar: el problema es que estás usando% para cambiar el tamaño de la imagen, que depende del ancho principal ... y estamos tratando de que el padre tenga el tamaño correspondiente al niño ... Así que eso no funcionará.
Lo más cerca que puede llegar, por lo que puedo decir, es evitar el tamaño de su imagen en% y mostrar el div como bloque en línea
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.small{
width:200px;
}<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg" class="small">
</div>
<div class="ccc">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>Si realmente necesita dimensionarlo como%, deberá agregar otro contenedor y dimensionar ese en su lugar
div.ccc {
position: relative;
display:inline-block;
}
div.ccc:after {
display: inline-block;
content: '';
position: absolute;
top: -50px;
right: -50px;
bottom: -50px;
left: -50px;
opacity: 0.7;
border: 5px solid red;
border-radius: 50%;
padding: 10px;
}
.img-container{
display:inline-block;
}
.img-container img{width:100%}
.small{
width:200px;
}<div class="ccc">
<div class="img-container small">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>
<div class="ccc">
<div class="img-container">
<img src="https://beautifulenvironments.files.wordpress.com/2017/12/twinkly-lights.jpg">
</div>
</div>El ancho de un div es 100% por defecto, esa es la razón por la que todos tus círculos son masivos y no están centrados en el niño.
¿Por qué no poner el borde del círculo rojo en la etiqueta img en lugar de la div? Es decir, coloque el círculo en el elemento secundario en primer lugar.
Otra opción sería hacer que div coincida con el tamaño del contenido configurando display: inline-block en la clase .ccc.
Si ninguno de esos es una opción, estoy bastante seguro de que no hay una forma pura de CSS de hacerlo.