图片上传后大小问题
1281
0
2022-02-12
2022-10-09
Hey、小怪兽
- • 在之前的博客里我上传了一张关于上一篇下一篇的图片，在我的电脑没发现样式问题，在手机看的时候这张图片明显被压扁了，大概是这样：
- • 其实这是因为，原先的图片尺寸大于手机的宽度了，由于我设置了样式：
-
// 之前的写法，这样会导致桌面端有些图片很大 ul li img { width: auto; max-width: 100%; margin: 1rem 0; } // 第二次优化后的写法（2022-9-13） ul li img { width: 100%; max-width: 600px; margin: 1rem 0; } // 第三次优化后的写法（2022-10-9） ul li img { width: auto; max-width: 70%; margin: 1rem 0; } @media (max-width: 768px) { ul li img { max-width: 100%; } } - • 这是我在reset.css设置的样式，主要是之前防止超出屏幕看不见整张图片，不过也同样导致了这个被挤压的问题，
- • 要解决这个问题只需要点到之前的那个上一篇下一篇的博客，双击这张图片：
- • 可以看到它的宽度是1315，高度是335，我并不想让它一直是这样的宽度，如果我的屏幕很大的话，它可以展示1315宽度的图片，如果屏幕很小，我希望它也会按比例缩小，这里只需要将这个宽度和长度删掉就可以了：
- • 点击保存后，再去看看效果，在手机端，没有挤压：
- • 在PC端也同样没有样式问题，就是图片有点小了，
后期再开发一个点击放大预览的功能就可以了（修改：Hey、小怪兽 2022-5-17），图片放大功能已在v2.9版本上线