Login
芋圆社区 > 编程 > Django > 图片上传后大小问题

图片上传后大小问题

373
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版本上线

上一篇:auto_now=True引发的问题

下一篇:Django版本查看和升级

Comment

Message Board

编程导航

Django使用Less

美化后台管理Admin

FBV 和 CBV

SimpleUI后台导航栏报错

Django多条件查询

标签属性使用变量引发的BUG

auto_now=True引发的问题

图片上传后大小问题

Django版本查看和升级

values和values_list

过滤器linebreaksbr

拆分views文件

AutoField报错

order_by多条件和随机排序

Django变量名的坑

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点