Implement selecting template for collage #14
@ -13,19 +13,6 @@
|
||||
height: 11in;
|
||||
-->
|
||||
<style>
|
||||
.image-surface {
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
background-color: lightgreen;
|
||||
}
|
||||
.imagebox {
|
||||
grid-area: image;
|
||||
display:flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50px;
|
||||
flex: 70%;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
background-color: lightyellow;
|
||||
@ -34,18 +21,63 @@
|
||||
.controls {
|
||||
background-color: lightgrey;
|
||||
display: flex;
|
||||
grid-area: controls;
|
||||
align-items: center;
|
||||
balki marked this conversation as resolved
Outdated
|
||||
justify-content: center;
|
||||
flex: 30%;
|
||||
}
|
||||
.imagebox {
|
||||
padding: 2rem;
|
||||
flex: 70%;
|
||||
}
|
||||
.image-surface {
|
||||
overflow: hidden;
|
||||
margin: auto;
|
||||
border: 2px solid;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
balki marked this conversation as resolved
Outdated
balki
commented
Remove empty line inside div Remove empty line inside div
|
||||
.showbuton {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
// paper sizes
|
||||
.letter-portrait {
|
||||
height: 100%;
|
||||
aspect-ratio: 85 / 110;
|
||||
}
|
||||
.letter-landscape {
|
||||
aspect-ratio: 110 / 85;
|
||||
}
|
||||
.fiveseven-portrait {
|
||||
aspect-ratio: 5 / 7;
|
||||
}
|
||||
.fiveseven-landscape {
|
||||
aspect-ratio: 7 / 5;
|
||||
}
|
||||
.foursix-portrait {
|
||||
aspect-ratio: 4 / 6;
|
||||
}
|
||||
.foursix-landscape {
|
||||
aspect-ratio: 6 / 4;
|
||||
}
|
||||
|
||||
.half-landscape {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.half-landscape .collage-img {
|
||||
flex: 50%;
|
||||
}
|
||||
|
||||
.one-two {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"one two"
|
||||
"one three";
|
||||
}
|
||||
.one-two .img1{
|
||||
grid-area: one;
|
||||
}
|
||||
|
||||
.letter-portrait .collage-img {
|
||||
height: 50%;
|
||||
}
|
||||
@ -75,14 +107,14 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="imagebox">
|
||||
<div id="collage" class="image-surface letter-landscape-2">
|
||||
<div class="collage-img img1" data-collage-image-url="images/img1.jpg">
|
||||
<!-- <img src="img1.jpg"> -->
|
||||
<div id="collage" class="image-surface fiveseven-landscape one-two">
|
||||
<div class="collage-img img1" data-collage-image-url="images/img1.jpg">
|
||||
</div>
|
||||
<div class="collage-img img2" data-collage-image-url="images/img2.jpg">
|
||||
</div>
|
||||
<div class="collage-img img3" data-collage-image-url="images/img3.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="collage-img img2" data-collage-image-url="images/img2.jpg">
|
||||
<!-- <img src="img2.jpg"> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
@ -63,8 +63,8 @@ function snap() {
|
||||
req = {
|
||||
background_image: "",
|
||||
aspect: {
|
||||
width: 528 * 4 * 2,
|
||||
height: 816 * 4,
|
||||
width: 3150,
|
||||
height: 2250,
|
||||
},
|
||||
dimension: {
|
||||
width: collageDiv.clientWidth,
|
||||
|
Loading…
Reference in New Issue
Block a user
remove onChange