Boundary around an object within a unified picture

Question

Boundary around an object within a unified picture

I'm facing a bit of difficulty with a task. I need to add a border around an element within an image (I can't insert an image due to low reputation), and this border should match the width and height of the element exactly. It also needs to be responsive. I tried using Bootstrap media screen rules, but encountered issues with the width at certain resolutions. Here is the code. Thank you.

<div class="parent">
    <img />
    <span class="makeBorder"></span>
</div>

Here is the CSS:

.parent {
    position: relative;
}
.makeBorder {
    position: absolute;
    top: 15px;
    left: 23px;
    border: 2px solid red;
    width: 83%;
    height: 83%;
}

How I finally resolved it:

<div class="customClass"><img /></div>

.customClass{outline:1px solid red;outline-offset:-18px;}

html css twitter-bootstrap

Answer 1

Answer №1

Give this a shot: I decided to incorporate a button within the image, and it worked seamlessly. Some of the CSS properties in this example are not necessary as indicated by //.

<html>
    <head>
        <style>
            div{
                background:url("1.jpg") no-repeat;
                background-size:contain;//
                height:500px;//height of div
                width:500px;
                }
                button{
                height:50px;
                width:70px;
                outline:red solid 4px;
                margin:20px 20px;
                }
        </style>
    </head>
    <body>
        <div>
            <button >Hello</button>
        </div>
    </body>
</html>

Answer 2

Give this a shot: I decided to incorporate a button within the image, and it worked seamlessly. Some of the CSS properties in this example are not necessary as indicated by //.

<html>
    <head>
        <style>
            div{
                background:url("1.jpg") no-repeat;
                background-size:contain;//
                height:500px;//height of div
                width:500px;
                }
                button{
                height:50px;
                width:70px;
                outline:red solid 4px;
                margin:20px 20px;
                }
        </style>
    </head>
    <body>
        <div>
            <button >Hello</button>
        </div>
    </body>
</html>

Answer 3

Answer №2

<html>
    <head>
        <style>
            div{
            height:500px;
            width:500px;
            position:absolute;
            }
            button{
            position:absolute;
            height:50px;
            width:70px;
            outline:red solid 4px;
            margin:20px 20px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="1.jpg">
        </div>
        <button >Hello</button>
    </body>
</html>

For adding a second image, use the background image property:

z-index=-1;

Remember to use the positioning property mentioned above for proper placement.

Answer 4

<html>
    <head>
        <style>
            div{
            height:500px;
            width:500px;
            position:absolute;
            }
            button{
            position:absolute;
            height:50px;
            width:70px;
            outline:red solid 4px;
            margin:20px 20px;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="1.jpg">
        </div>
        <button >Hello</button>
    </body>
</html>

For adding a second image, use the background image property:

z-index=-1;

Remember to use the positioning property mentioned above for proper placement.

Answer 5

Answer №3

Below is the resolved issue:

HTML

<div class="parent">
    <img src="/path/to/img/png" class="img-responsive" />  // Added a new class img-responsive
    <span class="makeBorder"></span>
</div>

CSS

.parent {
    position: relative;
}
.makeBorder {
    position: absolute;
    top: 15%; // Used percentage instead of pixels for better responsiveness
    left: 23%; // Used percentage instead of pixels for better responsiveness
    border: 2px solid red;
    width: 83%;
    height: 83%;
}

NOTE: It is suggested to utilize percentages instead of pixels to enhance the responsiveness of your HTML work!

Answer 6

Below is the resolved issue:

HTML

<div class="parent">
    <img src="/path/to/img/png" class="img-responsive" />  // Added a new class img-responsive
    <span class="makeBorder"></span>
</div>

CSS

.parent {
    position: relative;
}
.makeBorder {
    position: absolute;
    top: 15%; // Used percentage instead of pixels for better responsiveness
    left: 23%; // Used percentage instead of pixels for better responsiveness
    border: 2px solid red;
    width: 83%;
    height: 83%;
}

NOTE: It is suggested to utilize percentages instead of pixels to enhance the responsiveness of your HTML work!

Answer 7

Answer №4

.container {
  position: relative;
}
.addBorder {
  position: absolute;
  top: 81px;
  left: 83px;
  border: 2px solid red;
  width: 55px;
  height: 60px;
}

<div class="container">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
  <span class="addBorder"></span>
</div>

It looks like this is the desired outcome

Answer 8

.container {
  position: relative;
}
.addBorder {
  position: absolute;
  top: 81px;
  left: 83px;
  border: 2px solid red;
  width: 55px;
  height: 60px;
}

<div class="container">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
  <span class="addBorder"></span>
</div>

It looks like this is the desired outcome

Boundary around an object within a unified picture

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Display a JSON object on a web browser

Currently, I am encountering a problem as I attempt to iterate through a dynamic table

What is causing the error message stating that the DateTime class object cannot be converted to a string?

Effortlessly navigate to the start of a section once the expander box is collapsed with this simple trick!

Retrieve the chosen item to automatically fill in the input fields using Ionic 2 and Angular

Align a div vertically in a responsive design layout

Access a document by selecting a particular page from a designated anchor tag

How to extract the YouTube video source using jQuery from an iframe snippet

Retrieve the scrolling height in Vue.js 2 window

The HTML div element is not expanding to the full width of the screen on an iPhone device

Curvature Factor equals Overflow of Color

What could be causing appendChild to malfunction?

The PHP code I wrote will be executed on the subsequent HTML page, not the one currently being displayed

What might be the reason behind the selection value not changing in the dropdown menu?

Animation failing to be queued properly

I'm having trouble getting my jQuery click handler to work

What could be causing my ajax request to not be successfully compiled?

Real-time console input/output feature for a gaming server utilizing either JavaScript or PHP

What could be causing the uneven alignment and padding of texts in my input box and select box in Bootstrap 5?

What is the reason behind Flask's choice to return <embed> files for download rather than simply displaying them