5
网页图片在某些 iPhone 机型下高度不正确
source link: https://www.itwork.club/2022/04/19/image-height-issue-in-ios/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
网页图片在某些 iPhone 机型下高度不正确
Apr 19, 2022CSS点击
父级有 display: flex, 作为子级的图片需要添加 align-self: flex-start
上线了一个新网页，产品提出在他手机上（iPhone 11）有一张图片被拉伸
我猜测是在 iOS 上图片没有按比例缩放，产生了拉伸，就加了个
object-fit: contain;
让产品试了下，发现图片不再拉伸了，但图片所在区域占了一个比图片本身高很多的高度
效果就是，图片的上下都有一大片空白
height: auto;
没效果，图片上下依然是大片空白
最后在 stackoverflow 上找到了这个问题
My parent had display: flex so I had to put align-self: flex-start on the image.
就给图片加上了 align-self: flex-start;
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK