如何在图像下方放置轮廓矩形，如下图所示

Question

Probably my question is fairly simple and I apologize for this but started shortly with html and css and I still do not have much practice. I would like to know how I can put a rectangle underneath an image (jpeg or css) as shown in the following image:

Answer 1

Wrap img in a div and add a psuedoelement to that div .

Using a pseudoelement means you don't need to declare the height and width of the img container.

 div { position: relative; display: inline-block; } img { vertical-align: bottom; } div:after { content: ''; position: absolute; left: 3rem; top: 3rem; border: 2px solid black; width: 100%; height: 100%; z-index: -1; } 

 <div><img src="https://unsplash.it/400"></div> 

A more complete layout example...

 section { padding: 3rem 4.5rem; } figure { position: relative; float: left; margin: 0 3rem 1rem 0; } img { vertical-align: bottom; } figure:after { content: ''; position: absolute; left: 1.5rem; bottom: 1.5rem; border: 2px solid black; width: 100%; height: 100%; z-index: -1; } h3 { margin-top: 0; } 

 <section> <figure><img src="https://unsplash.it/260"></figure> <h3>A Title</h3> <h5>Subtitle subtitle subtitle subtitle</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> 

Answer 2

This is a very basic example on how you can add a rectangle underneath an image using css. Check the snippet.

 div { position: absolute; width: 350px; height: 230px; border: 2px solid grey; top: 30px; left: 30px; z-index: -10; } img { width: 350px; } 

 <img src="https://static.boredpanda.com/blog/wp-content/uuuploads/landscape-photography/landscape-photography-23.jpg" /> <div></div> 

Answer 3

One way to do this, is by using a separate div for the border: Setting position: absolute; to the image and the div for the border, and using z-index to put the image on top of the border div.

You have to use a container div to embrace both, the image and the border div. This container gets position: relative (to set the position: absolute of the child elements into effect) and needs to have the dimensions of the entire cluster of child elements.

 .container { position: relative; width: 240px; height: 120px; } .container div { width: 200px; height: 100px; } .image { z-index: 20; position: absolute; top: 0px; background-color: lightblue; } .rect { z-index: 10; position: absolute; top: 20px; left: 40px; border: 1px solid #666; } 

 <p>Text</p> <p>Text</p> <div class="container"> <div class="image"> Image </div> <div class="rect"> </div> </div> <p>Text</p> <p>Text</p>