我正在检查 div smallCatalogBlock
if data-availability="No"
如果不是,则 soonOverlay
是附加到 smallCatalogBlockImg
div。
我遇到的问题是让 soonOverlay
高度仅覆盖图像。右边,它超出了图像容器并填满了整个 smallCatalogBlock
div。
我该怎么做才能只覆盖 smallCatalogBlockImg
?
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).find('.smallCatalogBlockImg').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 45%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0,0,0,.3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
bottom: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<div class="smallCatalogBlockImg">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="A">
</div>
<span class="smallCatalogTitle">A</span>
</div><div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<div class="smallCatalogBlockImg">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="B">
</div>
<span class="smallCatalogTitle">B</span>
</div>
最佳答案
您忘记相对定位叠加层的父级。只有这样,叠加层才能(绝对)相对于其父级定位和调整大小。
$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).find('.smallCatalogBlockImg').append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 45%;
height: auto;
display: inline-block;
vertical-align: top;
margin: 20px auto;
text-decoration: none;
}
.smallCatalogBlock img {
width: 80%;
height: auto;
box-shadow: 10px 5px 5px rgba(0, 0, 0, .3);
display: block;
margin: 0px auto 15px auto;
}
.smallCatalogTitle {
font-family: 'Nunito', sans-serif;
color: #4d4d4d;
font-size: 1.3rem;
text-align: center;
display: block;
font-weight: 400;
}
.comingSoonSmall {
position: relative;
}
.comingSoonSmall .soonOverlay {
width: 80%;
height: 100%;
background: #b82222;
opacity: .8;
position: absolute;
top: 0;
bottom: 0;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 1rem;
text-align: center;
}
.smallCatalogBlockImg {
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<div class="smallCatalogBlockImg">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="A">
</div>
<span class="smallCatalogTitle">A</span>
</div>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<div class="smallCatalogBlockImg">
<img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="B">
</div>
<span class="smallCatalogTitle">B</span>
</div>
关于javascript - 图像高度超过带有附加元素的容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54148108/