uniapp 防止头像变 海报拉伸宽高自适应 图库功能_uniapp 图片不拉伸

  <view class="mybox">
        <!-- ceshi -->
        <view
          class="beijingtu"
          :style="{ backgroundImage: 'url(' + mydata.header + ')' }"
        >
        </view>
      </view>

 ceshi:
        "https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1690822800&t=af51f3b594d79e98a711d0525a82af18",

  .mybox {
    width: 63px;
    height: 63px;
    margin-bottom: 5px;
    border-radius: 4px 4px 0px 0px;
    .beijingtu {
      width: 100%;
      height: 100%;
      margin-right: 10px;
      border-radius: 4px;
      background: url("https://img2.baidu.com/it/u=3853345508,384760633&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1690822800&t=af51f3b594d79e98a711d0525a82af18");
      background-size: cover;
      border-radius: 50%;
    }
  }
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

海报宽高全显示

 <image :src="mydata.content_img_path" class="abc"></image>

  <style >
/deep/ uni-image > img {
  height: auto !important;
  position: inherit !important;
  opacity: 1 !important;
}
</style>
  <style lang="scss" scoped>
    .abc {
    width: 100%;
    height: auto !important;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

图库功能

<section class="s2">
        <div class="mycontent2">
          <view class="hf-wrapper" v-show="type == 0">
            <view
              :class="index == current ? 'active' : ''"
              class="img8"
              v-for="(item, index) in photos"
              :key="index"
              @click="$emit('qiehuan', item, index)"
            >
           
              <image mode="aspectFill" :src="item.nomal_img"></image>
            </view>
          </view>
 </div>
       
      </section>

.hf-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
}

.hf-wrapper .img8 {
  position: relative;
  width: 23%;
  height: 0;
  padding-top: 31%;
  margin-right: 12rpx;
  margin-bottom: 12rpx;
  border-radius: 10rpx;
  border: 1px solid #fff;
}



.hf-wrapper .img8 image {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 10rpx;

  position: absolute;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47