6

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

4
  • html с css добавьте Commented 15 сент. 2018 в 12:00
  • вопрос в том как сделать что бы всё изображение было ..а обрезать не проблема Commented 15 сент. 2018 в 12:31
  • А как обрезать? Commented 15 сент. 2018 в 12:50
  • 1
    @ДимаДиман в общем вопрос на столько общий что можно рассказать кучу технологий , в общем если это сделать на svg то на те дырки для картинок наложить mask или pattern то можно добиться того что вся картинка поместится и обрежется, но копать надо в сторону canvas Commented 16 сент. 2018 в 3:18

1 ответ 1

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.sstatic.net/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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.