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