Based on @G-Cyrillus's code, the following code is developed.
Product image size is responsive to the number of inserted images.
If there is one image, it will be largest. As images are added, it will be smaller.
If numbers of images is over 5, images will be displayed in the second line.
I tried "display:flex" at first but it is using "display:grid".
Thanks to @G-Cyrillus
var productcard = document.querySelectorAll("div.product-overlay");
for (i = 0; i < productcard.length; i++) {
productcard[i].setAttribute("id", "box-" + [i]);
var check = document.querySelectorAll('#box-'+ CSS.escape(i) + ' img');
var nb = check.length * 2;
var mgleft = -15;
var offY = 20 ;
var offX = 10 ;
var imgwidth = 240;
var repeatecount = check.length;
if (repeatecount<6){
imgwidth = 240- (20*(repeatecount-1));
mgleft = -15-(check.length-1);
} else {
imgwidth = 150;
mgleft = -13;
}
productcard[i].setAttribute('style', ' --repeat:'+ repeatecount + ' ; --offsety:' + offY + 'px; --offsetx:' + offX + 'px; '+"--imagewidth:"+ imgwidth+ 'px; '+'--marginleft:'+mgleft+ 'px; ');
}
:root {
--imagewidth: 150px;
--cardwidth: 200px;
--cardheight: 300px;
--padding: 20px;
--marginleft: -15px;
}
body > div {
display: flex;
flex-wrap: wrap;
}
div.product-overlay img {
width: var(--imagewidth);
margin-left: var(--marginleft);
filter:drop-shadow(-1px -1px 3px )
}
div.product-overlay {
background: gray;
height: var(--cardheight);
padding: --padding;
width: var(--cardwidth);
display: grid;
grid-template-columns: repeat(var(--repeat), var(--offsety)) 1fr;
grid-template-rows: repeat(var(--repeat), var(--offsetx)) 1fr 20px;
margin: 1em;
border-radius:0.5em 0.5em 0.5em 0.5em;
border: 0 px;
}
div.product-overlay :nth-child(1) {
grid-row: 1;
grid-column: 1;
}
div.product-overlay :nth-child(2) {
grid-row: 2;
grid-column: 2;
}
div.product-overlay :nth-child(3) {
grid-row: 3;
grid-column: 3;
}
div.product-overlay :nth-child(4) {
grid-row: 4;
grid-column: 4;
}
div.product-overlay :nth-child(5) {
grid-row: 5;
grid-column: 5;
}
div.product-overlay :nth-child(6) {
grid-row: 4;
grid-column: 1;
}
div.product-overlay :nth-child(7) {
grid-row: 5;
grid-column: 2;
}
div.product-overlay :nth-child(8) {
grid-row: 6;
grid-column: 3;
}
div.product-overlay :nth-child(9) {
grid-row: 7;
grid-column: 4;
}
div.product-overlay :nth-child(10) {
grid-row: 8;
grid-column: 5;
}
div.product-overlay :nth-child(11) {
grid-row: 9;
grid-column: 6;
}
div[id].product-overlay > div {
background:rgba(255,255,255,0.5);
margin:-18px;
border-radius:0 0 0.5em 0.5em;
padding:0.25em;
margin-top: auto;
grid-row: 1 / span calc(var(--repeat) + 2);
grid-column: 1 / span calc(var(--repeat) + 1) ;
}
p {margin:0;}
<div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
<div class="product-overlay">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
<img src="https://i.ibb.co/PtZR5hT/hangjutowel-scott-removebg-preview-1.png">
</div>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…