图片在竖屏设备显示异常时，可通过五种方法实现自适应：一、CSS max-width与height:auto；二、object-fit配合固定宽高比容器；三、viewport+媒体查询定向适配；四、Grid+minmax()弹性填充；五、JS动态切换srcset。
如果您在HTML页面中插入图片后发现其在竖屏设备上显示异常，例如被裁剪、拉伸或无法完整显示，则可能是由于图片尺寸与竖屏视口比例不匹配。以下是实现图片在竖屏模式下自适应显示的多种方法：
一、使用CSS max-width和height: auto属性
该方法通过限制图片最大宽度为容器宽度，并保持原始宽高比，确保图片在竖屏下不溢出且不扭曲。
1、在HTML中为图片添加class属性，例如：
2、在style标签或外部CSS文件中定义该类：.vertical-fit { max-width: 100%; height: auto; }。
立即学习“前端免费学习笔记（深入）”；
3、确保图片父容器具有明确的宽度上下文，例如设置width: 100%或使用flex布局包裹。
二、应用object-fit属性配合固定容器尺寸
该方法将图片嵌入一个具有固定宽高比（如9:16）的容器中，利用object-fit: contain强制图片完整缩放并居中显示，适用于全屏竖屏图场景。
1、为图片外层添加div容器：
2、设置容器宽高比为竖屏典型值：.vertical-container { width: 100vw; height: 100vh; aspect-ratio: 9/16; }。
3、设置图片样式：.vertical-img { width: 100%; height: 100%; object-fit: contain; }。
三、使用viewport meta标签配合媒体查询定向适配
该方法通过识别设备方向变化，动态启用竖屏专用样式规则，避免横屏误触发。
1、在HTML 中添加响应式视口声明：。
2、添加竖屏媒体查询CSS：@media (orientation: portrait) { .portrait-only-img { width: 100%; height: auto; } }。
3、为图片指定该类：
四、采用CSS Grid配合minmax()实现弹性竖屏填充
该方法利用Grid布局能力，在竖屏下自动分配可用高度，使图片按需扩展但不超过屏幕边界。
1、创建Grid容器：
2、设置Grid模板行使用minmax()约束最小高度为0，最大为视口高度：.vertical-grid { display: grid; grid-template-rows: minmax(0, 100vh); }。
3、对图片设置：.vertical-grid img { width: 100%; height: 100%; object-fit: scale-down; }。
五、JavaScript动态检测orientation并切换图片srcset
该方法根据设备当前方向加载不同分辨率的竖屏优化图片资源，提升加载效率与清晰度。
1、在HTML中为图片添加data属性标识：
2、编写脚本监听resize和orientationchange事件：window.addEventListener('resize', updateImageSource);。
3、函数内判断window.innerHeight > window.innerWidth，若为真则设置img.src = img.dataset.portraitSrc，否则设为landscape版本。
