gpt4 book ai didi

javascript - 如何让附加元素成为图像的高度

转载 作者:太空宇宙 更新时间:2023-11-04 06:37:30 26 4
gpt4 key购买 nike

我将 div .soonOverlay 附加到特定的 .smallCatalogBlock。我似乎无法弄清楚的是如何使 soonOverlay 的高度仅与 smallCatalogBlock 中的 img 一样高。现在它的高度覆盖了整个容器。

有人看到我做错了什么或者我该如何解决这个问题吗?

$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
}
});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 60%;
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;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" alt="Fastening Technology Catalog">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>

最佳答案

我已经更新了下面的脚本。

$('.smallCatalogBlock').each(function() {
if ($(this).data('availability') === 'No') {
$(this).append('<div class="soonOverlay"><div class="soonOverlayInner"><div class="total-center"><p class="dGw">Coming Soon</p></div></div></div>');
console.log("It should be working");
var img_w = $('.smallCatalogBlock > img').width();
var img_h = $('.smallCatalogBlock > img').height();
$('.soonOverlay').width(img_w).height(img_h);
}

});
.smallCatalogWrap {
width: 100%;
height: auto;
margin: 60px 0;
}
.smallCatalogBlock {
width: 60%;
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;
margin: 0 10%;
}
.soonOverlayInner {
position: relative;
min-height: 350px;
}
.soonOverlayInner .dGw {
font-weight: 600;
text-transform: uppercase;
font-size: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="smallCatalogBlock comingSoonSmall" data-availability="No">
<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782" alt="Fastening Technology Catalog">
<span class="smallCatalogTitle">Technology</span>
<div class="smallCatalogButtonWrap">
<div class="catalogSmallCircle"></div>
</div>
</div>

关于javascript - 如何让附加元素成为图像的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54093187/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com