html - Border on element inside a single image -


enter image description herei'm struggling on problem. have put border on element inside image(i can't put image due reputation under 10) border should have same width , height of element.it should responsive.i write code based on bootstrap media screen resolution when reduced page wide becomes small @ specific screen resolution.that's code.thanks.

<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 do:

<div class="customclass"><img /></div>  .customclass{outline:1px solid red;outline-offset:-18px;} 

try hereby use button on image , correctly work.some of css property no useful in example denoted //.

<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> 

Comments

Popular posts from this blog

javascript - oscilloscope of speaker input stops rendering after a few seconds -

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -