正文
模拟移动端图片预览效果,使图片最大边适应屏幕宽或高。
<div class="prev-box"> <img class="prev-img" src="https://images.unsplash.com/photo-1612998137328-15874448d686?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=668&q=80" /> </div>
.prev-box { background: rgba(0, 0, 0, 1); position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 10000; } /* 保证最大边占满屏幕 */ .prev-box .prev-img { max-width: 100%; max-height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
效果
竖屏图片效果
网络异常,图片无法展示
|
横屏图片效果