image

组件演示

html

<div class="warpper">
  <x-nav-bar showArrow="{{true}}" title="Image"></x-nav-bar>
  <div class="container">
    <div>resize: stretch</div>
    <div class="img-box">
      <image class="img-image" resize="stretch" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
    </div>
    <div>resize: cover</div>
    <div class="img-box">
      <image class="img-image" resize="cover" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
    </div>
    <div>resize: contain</div>
    <div class="img-box">
      <image class="img-image" resize="contain" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
    </div>
  </div>
</div>

css

.warpper {
  background-color:white;
  width:100%;
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container{
  flex: 1;
  color: black;
}

.img-box{
  width: 80vw;
  height: 25vh;
  border: 1rpx solid red;
}
.img-image{
  width: 100%;
  height: 100%;
}

属性