Geek Answers Handbook

Border element inside one image

enter image description hereI am struggling with a problem. I have to put the border of the element inside the image (I can’t put the image because of a reputation of less than 10), but this border should have the same width and height of this element. He must be responsive. I write code based on bootstrap media resolution resolution, but when I reduce my page, it becomes small at a certain screen resolution. This is the code. Thank.

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

and css:

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

What am I finally doing:

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

.customClass{outline:1px solid red;outline-offset:-18px;}
+4
source share
4 answers

Try this, I use the button on the image and it works correctly. Some css property is not useful in this example, 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>
0
source 
<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>

, 2 , .

  z-index=-1;

;

0

Here is the solution

HTML

<div class="parent">
    <img src="/path/to/img/png" class="img-responsive" />  // Here I added a class img-responsive
    <span class="makeBorder"></span>
</div>

CSS

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

NOTE. What I want to do is use percentages instead of pixels so that your / html work becomes responsive.

0
source 

.parent {
  position: relative;
}
.makeBorder {
  position: absolute;
  top: 81px;
  left: 83px;
  border: 2px solid red;
  width: 55px;
  height: 60px;
}
<div class="parent">
  <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRBnmmAWOlqD-8ZjLvlkXoz0sSMOd7DiA5paUl7Ug2VBjXnnqKaHw" />
  <span class="makeBorder"></span>
</div>
Run codeHide result

I guess this is what you want to do

0
source

More articles:


All Articles