0
175
Vistaspara poner border-pixel y border-radius alrededor de las imágenes
Intento crear un contenedor que contenga un div con imagen, pero alrededor de la imagen debo crear otro border: 1px solid #C7B273; en cuatro partes:
arriba, abajo, izquierda, derecha y proporcione otra propiedad necesaria para el borde px alrededor de la imagen.
La imagen tiene border-radius:0; Por UI/UX entiendo ese border: 1px solid #C7B273; debería permanecer en margin-bottom la imagen.
Intento hacer esto:
img { border: 1px solid #999; border-radius: 10px; padding: 15px; position: absolute; margin-left: auto; margin-right: auto; display: block; z-index: 10; } <div class="border"> <img src="./images/about.jpg" width="200px" height="256px" alt="Nature"> </div>Y obtener estos resultados:
Pero el resultado final debería ser como la imagen:
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
¿Algo como eso?
.w { height: 256px; width: 200px; position: absolute; border: 1px solid #999; border-radius: 10px; } img { padding: 15px; position: absolute; margin-left: auto; margin-right: auto; display: block; z-index: 10; } <div class="border"> <div class="w"></div> <img src="https://via.placeholder.com/900/gray" width="200px" height="256px" alt="Nature"> </div>
·
Juan Pablo Isaza
Denunciar
0
.border { height: 256px; width: 200px; position: relative; } .image { position: relative; width: 100%; height: 100%; display: block; } .div { content: ""; border: 1px solid #C7B273; border-radius: 10px; position: absolute; width: 95%; height: 95%; bottom: -10px; left: -10px; z-index: -1 } <div class="border"> <img class="image" src="https://placeimg.com/200/256/nature" width="200px" height="256px" alt="Nature" /> <div class="div"></div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta