| | |
| | | ></vue-cropper> |
| | | </div> |
| | | <div class="previews"> |
| | | <img style="width: 100px;height: 100px;border-radius: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> |
| | | <img style="width: 150px;height: 150px;border-radius1: 50%;object-fit: cover" :src="cutImgSrc" alt="图片"> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | autoCrop: true, |
| | | canMove: false, |
| | | centerBox: true, |
| | | height: 300, |
| | | width: 300, |
| | | outputSize:{width: 300, height: 300}, |
| | | autoCropWidth: 300, |
| | | autoCropHeight: 300, |
| | | height: 500, |
| | | width: 500, |
| | | outputSize:{width: 500, height: 500 }, |
| | | autoCropWidth: 500, |
| | | autoCropHeight: 500, |
| | | fixed: true, |
| | | fixedNumber: [1, 1] |
| | | }, |
| | |
| | | .iconShot { |
| | | .icon-dialog { |
| | | .clip { |
| | | display: flex; |
| | | .img { |
| | | height: 400px; |
| | | flex: 7.5; |
| | | height: 500px; |
| | | //float: left; |
| | | // display: inline-block; |
| | | |
| | | .vue-cropper { |
| | | background-image: none; |
| | | } |
| | |
| | | |
| | | } |
| | | .previews { |
| | | width: 100%; |
| | | height: 100px; |
| | | position: relative; |
| | | //width: 100px; |
| | | flex: 2.5; |
| | | //float: right; |
| | | height: 200px; |
| | | //position: relative; |
| | | >img { |
| | | position: absolute; |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | //position: absolute; |
| | | //left: 50%; |
| | | transform: translate(35%, 50px); |
| | | max-height: 100%; |
| | | } |
| | | } |