在模板设计开发过程,往往会涉及到PC端与手机端响应式布局的问题,那么网站图片如何实现随着屏幕大小变化而不拉长缩短。
其实很简单,只需要对网站css样式中写入
- img { display: inline-block; max-width: 100%; height: auto; }
当然,有时候为了需要,在写css代码前也会对图片img进行重置样式
如果对css样式重置不明白的,可查看文章:什么是css样式重置,css重置样式的目的是什么
在模板设计开发过程,往往会涉及到PC端与手机端响应式布局的问题,那么网站图片如何实现随着屏幕大小变化而不拉长缩短。
其实很简单,只需要对网站css样式中写入
- img { display: inline-block; max-width: 100%; height: auto; }
当然,有时候为了需要,在写css代码前也会对图片img进行重置样式
如果对css样式重置不明白的,可查看文章:什么是css样式重置,css重置样式的目的是什么
#版权声明#
一、覃师宁博客 | 本文采用知识共享署名 4.0 国际许可协议[BY-NC-SA]进行授权
二、文章名称:《网站图片如何实现根据屏幕大小变化而不拉长缩短》
三、文章固定链接:http://qinshining.com/webpage/37.html
四、覃师宁博客(qinshining.com)原创版权所有,禁止一切形式采集/转载,如需转载请联系站长!