我正在尝试创建一个div,其宽度和高度为视图宽度的37%。
我希望该div居中放置,因此我尝试获取视图宽度的50%并减去37%的值。
然后,我想让该div位于父div的50%外侧。它基本上是一张封面照片及个人资料图片。底部位置需要为负数,以将business-cover-logo强制移出business-view-wrapper。我所能想到的唯一方法就是乘以负数。
我希望该div居中放置,因此我尝试获取视图宽度的50%并减去37%的值。
然后,我想让该div位于父div的50%外侧。它基本上是一张封面照片及个人资料图片。底部位置需要为负数,以将business-cover-logo强制移出business-view-wrapper。我所能想到的唯一方法就是乘以负数。
<div class="business-view-cover">
<div class="business-cover-logo"></div>
</div>
.business-view-cover {
position: relative;
height: calc(100vw * 0.5625);
background-size: cover;
background-position: center center;
background-image: url('../images/business-cover-1.png');
.business-cover-logo {
position: absolute;
--width-profile: calc(100vw * 0.37);
--half-width: calc(var(--width-profile) / 2);
--profile-bottom: calc(-1 * var(--half-width));
bottom: calc(var(--profile-bottom) * -1);
left: calc(50vw - var(--width-profile));
width: var(--width-profile);
height: var(--width-profile);
border: 4px solid $e1-background-grey;
border-radius: 1.6rem;
background-size: cover;
background-position: center center;
background-image: url('../images/logo-cover-napa.png');
}
}
使用固定值的示例。
.business-view-cover {
position: relative;
height: calc(100vw * 0.5625);
background-size: cover;
background-position: center center;
background-image: url('../images/business-cover-1.png');
.business-cover-logo {
position: absolute;
bottom: -7.65rem;
left: calc(50vw - 7.65rem);
width: 15.3rem;
height: 15.3rem;
border: 4px solid $e1-background-grey;
border-radius: 1.6rem;
background-size: cover;
background-position: center center;
background-image: url('../images/logo-cover-napa.png');
}
}