此在线商店页面以4个元素的行显示产品，并显示产品图片，标题和价格。从使用<img>切换到<div>的{{1}}（用于实现background-image）后，我难以响应产品图像的响应显示和盒装元素的高度。 / p>
围栏使用jquery，bootstrap和matchHeight.js
background-blend-modehttps://codepen.io/thaFlow/pen/RwPBGyG
那么我如何将内容放入<div class="col-lg-3 col-6">
<a href="http://xd.klomfar.at/produkt/papierkorb-waeschekorb-weiss-ohne-deckel/" class="prod-box" data-mh="mh" style="height: 364px;">
<div class="prod-img-nest">
<div class="prod-img" style="background-image: url(''),
url('http://xd.klomfar.at/wp-content/uploads/2018/07/papierkorb-weiß-klomfar-1-370x370.jpg'); background-blend-mode: multiply; background-size: 100%, contain; background-position: center center;">
</div>
<!-- OLD IMAGE solution <img src="http://xd.klomfar.at/wp-content/uploads/2018/07/papierkorb-weiß-klomfar-1-370x370.jpg" class="attachment-product-thumb-size size-product-thumb-size wp-post-image wp-post-image" />-->
<div class="name">Papierkorb / Wäschekorb</div>
<div class="desc">
Edelstahl Weiß matt, in zwei Größen
</div>
<div class="price">
<strong><span class="woocommerce-Price-amount amount">24,00 <span class="woocommerce-Price-currencySymbol">€</span></span> – <span class="woocommerce-Price-amount amount">34,00 <span class="woocommerce-Price-currencySymbol">€</span></span> EUR</strong>
</div>
</div>
</a>
</div>
中，并确保图像反应灵敏，并且不会重复或溢出？