Picture setting width
.img{
width:100%;
}
Add attribute mode="widthFix" to image
<image class="img" src="/../../images/welcome.png" mode="widthFix">
Detailed mode:
There are 13 modes in mode, 4 of which are zoom modes and 9 are crop modes.
| mode | value | Description |
|---|---|---|
| Zoom | scaleToFill | Scaling the image without maintaining the aspect ratio, so that the width and height of the image are fully stretched to fill the image element |
| Zoom | aspectFit | Keep the aspect ratio and zoom the picture so that the long side of the picture can be fully displayed. In other words, the picture can be displayed completely. |
| Zoom | aspectFill | Keep the aspect ratio of the zoomed picture, and only ensure that the short side of the picture is fully displayed. In other words, the picture is usually only in the horizontal or vertical direction is complete, the other direction will be intercepted. |
| Zoom | widthFix | The width does not change, the height changes automatically, keeping the original image aspect ratio unchanged |
| Crop | top | Do not zoom the picture, only show the top area of the picture |
| Crop | bottom | Do not zoom the picture, only show the bottom area of the picture |
| Crop | center | Do not zoom the picture, only show the middle area of the picture |
| Crop | left | Do not zoom the picture, only show the left area of the picture |
| Crop | right | Do not zoom the picture, only display the right area of the picture |
| Crop | top left | Do not zoom the picture, only display the upper left area of the picture |
| Crop | top right | Do not zoom the picture, only display the upper right area of the picture |
| Crop | bottom left | Do not zoom the picture, only display the lower left area of the picture |
| Crop | bottom right | Do not zoom the picture, only display the lower right area of the picture |