当前位置：网站首页>object-fit:cover； It doesn't work in the applet. How to deal with the deformation of the applet image

object-fit:cover； It doesn't work in the applet. How to deal with the deformation of the applet image

2022-07-19 01:29:00 【Pengzai studio】

I wrote an article the other day css Prevent image distortion object-fit: cover;

Use object-fit: cover; To prevent image distortion , It's a coincidence , I've developed and played these two days zblog Applet “ Dirty words ” The cover was just squeezed out of shape , therefore , Just add this to the picture css attribute .

what？ But there's no egg in it , At first I thought I had misspelled , I also made a special copy to try , It still doesn't work ......

Take a look at the contrast effect of the screenshot applet page first , The carousel on the left is squeezed , On the right side of the carousel, there is no extrusion , Keep the original size , The surplus is cut out , Obviously the visual effect on the right side is better .

Is this ...... Simple arrangement

Check the next small program documentation , The original wechat applet image does not support these css The attribute is , The authorities offered their own way , Only need to image add mode Attribute is enough , The corresponding parameters on the correspondence can be perfectly solved .

grammar

<image src="http://cdn.duanqinghua.com/duanqinghua/img/65.jpg" mode="aspectFill"></image>

mode The legal value of

value	explain
scaleToFill	Zoom mode , Do not keep aspect ratio zooming picture , Stretch the width and height of the picture completely to fill image Elements
aspectFit	Zoom mode , Keep the aspect ratio scaled , Make the long edges of the picture fully visible . in other words , The picture can be displayed completely .
aspectFill	Zoom mode , Keep the aspect ratio scaled , Only make sure that the short side of the picture is fully displayed . in other words , Pictures are usually complete only horizontally or vertically , Intercept will occur in the other direction .
widthFix	Zoom mode , The width does not change , Automatic height change , Keep the aspect ratio of the original image unchanged
heightFix	Zoom mode , The height remains the same , The width changes automatically , Keep the aspect ratio of the original image unchanged
top	Cut pattern , Unscaled picture , Show only the top area of the image
bottom	Cut pattern , Unscaled picture , Only the bottom area of the image is displayed
center	Cut pattern , Unscaled picture , Show only the middle part of the picture
left	Cut pattern , Unscaled picture , Only the left side of the image is displayed
right	Cut pattern , Unscaled picture , Show only the right area of the picture
top left	Cut pattern , Unscaled picture , Only the upper left of the image is displayed
top right	Cut pattern , Unscaled picture , Only the upper right of the image is displayed
bottom left	Cut pattern , Unscaled picture , Only the lower left of the image is displayed
bottom right	Cut pattern , Unscaled picture , Only the lower right part of the image is displayed

Bug & Tip

tip：image Default width of component 320px、 Height 240px

tip：image The QR code in the component / Applet code image does not support long press recognition . Only in wx.previewImage Long press recognition is supported in

Official documents https://developers.weixin.qq.com/miniprogram/dev/component/image.html

The address of onlookers http://www.sharedblog.cn/post/226.html

Personal blog http://sharedblog.cn/

Software download http://iqzhan.com/