Fatal编程技术网
  • html/
  • Html 单个图像中元素的边框

Html 单个图像中元素的边框

html css twitter-bootstrap

Html 单个图像中元素的边框,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我在一个问题上挣扎。 我必须在图像中的元素上添加边框（由于声誉低于10，我无法将图像添加到元素上）但是边框的宽度和高度应该与该元素的宽度和高度相同。它应该是响应性的。我根据引导媒体屏幕分辨率编写代码，但是当我降低页面时，宽度在特定的屏幕分辨率下变小。这就是代码。谢谢 <div class="parent"> <img /> <span class="makeBorder"></span> </div> 我最后要做的是：

我在一个问题上挣扎。 我必须在图像中的元素上添加边框（由于声誉低于10，我无法将图像添加到元素上）但是边框的宽度和高度应该与该元素的宽度和高度相同。它应该是响应性的。我根据引导媒体屏幕分辨率编写代码，但是当我降低页面时，宽度在特定的屏幕分辨率下变小。这就是代码。谢谢

<div class="parent">
    <img />
    <span class="makeBorder"></span>
</div>
我最后要做的是：

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

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


.customClass{轮廓：1px实心红色；轮廓偏移：-18px；}
试试这个，我在此使用图像上的一个按钮，它可以正常工作。在这个由//表示的示例中，一些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>


div{
背景：url（“1.jpg”）不重复；
背景尺寸：包含//
高度：500px；//div的高度
宽度：500px；
}
钮扣{
高度：50px；
宽度：70px；
外形：红色实心4px；
利润率：20px 20px；
}
你好
使用上述定位属性

这是解决方案

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>
注意：我想说的是使用百分比而不是像素，这样你的作品/html就可以响应了

.parent{
位置：相对位置；
}
.makeBorder{
位置：绝对位置；
顶部：81px；
左：83px；
边框：2倍纯红；
宽度：55px；
高度：60px；
}
尝试使用媒体查询，具体到它开始看起来很奇怪的时候。然后你可以创建css规则，这些规则只在窗口有一定大小时才存在。我试着这样做并保留它，因为我注意到，当我为屏幕指定一个代码（最大宽度：739px）时，当我将屏幕缩小到729px时，它就不起作用了，依此类推。这就是为什么我尝试使用基于父级大小的宽度和高度百分比，但它不起作用。谢谢，我已经尝试过了，但没有做我想做的。也许我会尝试制作两张图像，并在第二张图像上加一个边框，这样在所有屏幕媒体上都是一样的。你能解释一下吗，我说的是用一个背景图像创建一个div，内部称为image avec img标记，将其内部对齐，然后在该图像标记上加一个边框：。最后，我没有这样做，因为我面临着同样的问题。所以我使用了一个div，在该div中我放置了一个图像标签，然后在其上使用outline属性。为了模拟响应，我播放的每个屏幕媒体都使用outline offset的大小。（我不知道如何将代码放在这条评论上，所以我在顶部编辑了我的第一条）。（对不起我的英语） 
<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>

  z-index=-1;

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

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