Question

enter image description here 我正在努力解决问题。我必须在图像内部放置一个边框（由于声誉低于10，我无法放置图像）但该边框应该具有该元素的相同宽度和高度。它应该是响应的。我写代码基于自举媒体屏幕分辨率，但当我缩小页面时，在某些特定的屏幕分辨率下，宽度会变小。这就是代码。谢谢。

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

和css：

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

我最终做了什么：

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

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

Answer 1

试试这个我特此在图像上使用一个按钮，它正确工作。一些css属性在这个例子中没有用，表示为//.

<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

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

使用上述定位属性;

Answer 3

这是解决方案

<强> 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%;
}

注意：我想说的是使用百分比而不是像素，这样您的工作/ HTML就会响应!!

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

我想这就是你想要做的事情

在单个图象里面的元素的边界

4 个答案: