6

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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