In general, the problem is this. On the site, users insert pictures into the holes. Sometimes pictures go beyond the edges, as in the photo. How to make these edges cut? Here I think, to make a div with overflow: hidden with coordinates and dimensions in accordance with the holes, but it will have to be shaped in accordance with the holes, I don’t know how to do it. Finding transparent areas in the photo has already been done. problem with edges

  • html with css add - Alexander
  • the question is how to make the whole image be .. and it's not a problem to trim - Nikita Fast
  • And how to cut? - Dima Diman
  • one
    @ Dima Diman, in general, the question is so general that you can tell a bunch of technologies, in general, if you do it on svg, then put a mask or pattern on those picture holes, then you can ensure that the whole picture fits and is cut off, but you need to dig in the direction of the canvas Fast

1 answer 1

Thought you have the right course - overflow:hidden; . But, "finding transparent areas" ... Is this even legal? )))

 window.onload = function() { var oAl = document.querySelector('.photos_wrapper'), oSrs; document.addEventListener('dragstart', function(ev) { oSrs = ev.target.src; }); oAl.addEventListener('dragover', function(ev) { ev.preventDefault(); }); oAl.addEventListener('drop', function(ev) { ev.preventDefault(); if (ev.target.classList.contains('vignette')) { ev.target.style.backgroundImage = `url('${oSrs}')`; let oClear = document.createElement('DIV'); oClear.classList.add('clear'); oClear.innerHTML = '×'; oClear.addEventListener('click', function(ev) { this.parentElement.style.backgroundImage = ''; this.remove(); }); ev.target.appendChild(oClear); } }); } 
 * { box-sizing: border-box; margin: 0; padding: 0; } .photos_wrapper { background: url(https://i.stack.imgur.com/WEjJ0.jpg) -5px -3px no-repeat; height: 439px; margin: 0 auto; position: relative; width: 612px; } .vignette { background: #eff; background: url('https://i.imgur.com/sgsEcPB.jpg') center no-repeat; background-size: cover; border: 2px solid #0cc; box-shadow: 1px 2px 2px #000; overflow: hidden; position: absolute; } .vignette:hover>.clear { visibility: visible; } .style_1 { border-radius: 30%; height: 130px; width: 225px; } .style_2 { border-radius: 50%; height: 106px; width: 148px; } .style_3 { border-radius: 30%; height: 111px; width: 151px; } .style_4 { border-radius: 30%; height: 145px; width: 236px; } .photo_1 { left: 26px; top: 20px; } .photo_2 { left: 358px; top: 20px; } .photo_3 { left: 15px; top: 160px; } .photo_4 { left: 151px; top: 149px; transform: rotate(-19deg); } .photo_5 { left: 307px; top: 149px; transform: rotate(19deg); } .photo_6 { left: 445px; top: 160px; } .photo_7 { left: 22px; top: 275px; } .photo_8 { left: 351px; top: 275px; } .thumbs_wrapper { bottom: 0; display: flex; flex-flow: row nowrap; justify-content: space-around; position: absolute; width: 100%; } .clear { background: #fff; border-radius: 50%; bottom: 4px; cursor: pointer; font: bold 20px/20px 'Arial'; height: 20px; left: calc(50% - 10px); opacity: 0.5; position: absolute; text-align: center; transition: all 0.6s ease; visibility: hidden; width: 20px; } .clear:hover { border-radius: 10%; opacity: 1.0; } .thumbs_wrapper>img { border: 1px solid #eee; box-shadow: 1px 3px 8px #000; height: 30px; width: 40px; } .thumbs_wrapper>img:hover { animation: shake .5s ease infinite; } @keyframes shake { 26% { transform: rotate(-20.0deg); } 76% { transform: rotate(20.0deg); } } 
 <div class="photos_wrapper"> <div class="vignette style_1 photo_1"></div> <div class="vignette style_1 photo_2"></div> <div class="vignette style_2 photo_3"></div> <div class="vignette style_3 photo_4"></div> <div class="vignette style_3 photo_5"></div> <div class="vignette style_2 photo_6"></div> <div class="vignette style_4 photo_7"></div> <div class="vignette style_4 photo_8"></div> <div class="thumbs_wrapper"> <img src="https://i.imgur.com/IHb1NmG.jpg"> <img src="https://i.imgur.com/SxTlnLn.jpg"> <img src="https://i.imgur.com/5628Txd.jpg"> <img src="https://i.imgur.com/sEd6Vn5.jpg"> <img src="https://i.imgur.com/saDiyYu.jpg"> <img src="https://i.imgur.com/075L1sG.jpg"> <img src="https://i.imgur.com/I5G6HaZ.jpg"> <img src="https://i.imgur.com/wDT622c.jpg"> </div> </div>