我有一个带有偏移边框的图像。它可以完美地在移动设备上运行,但是一旦放大,div就会保持相同的高度,因此边框不会与图像保持一致。试图添加一个min()到大小,但这并没有改变任何东西。我傻了吗多谢你们!请参阅下面的图像,以获取我想要的示例。
HTML:
<!-- profile picture -->[![enter image description here][1]][1]
<div class="profile">
<div class="border"></div>
<img src="{% static 'haloassets/images/PaulBG.jpg' %}" alt="" />
</div>
CSS / SCSS:
.profile {
width: 85vw;
height: 21vh;
float: right;
transform: translateX(2rem);
position: relative;
img {
width: 100%;
height: auto;
position: absolute;
}
.border {
width: 100%;
height: 100%;
position: absolute;
border: 4px solid $primary;
top: 10px;
left: -10px;
z-index: -1;
}
}
答案 0 :(得分:0)
.profile {
position: relative;
width: 300px;
height: 200px;
margin: auto;
}
.border, img {
position : absolute;
left :0;
top:0;
}
.border{
outline: 4px solid red;
outline-offset: 0px;
margin: 15px -15px;
width: 100%;
height: 100%;
}
<div class="profile">
<div class="border">
</div>
<img src="https://via.placeholder.com/300X200" alt="" />
</div>