Как сделать обрезку краёв фото на сайте?

#html #css #css3

В общем, проблема такая. На сайте пользователи вставляют фотки в дырки. Иногда картинки
выходят за края, как на фото. Как сделать так, чтобы эти края обрезались? Вот думаю,
сделать div с overflow:hidden с координатами и размерами в соответствии с дырками,
но ему надо будет придать форму в соответствии с дырками, как это сделать - не знаю.
Нахождение прозрачных областей на фото уже сделано.

    

Ответы

Ответ 1

Ход мысли у Вас правильный - overflow:hidden;. Но, "нахождение прозрачных областей"...
Это вообще законно? )))



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); }
}