码上敲享录 > HTML+CSS实战 > 页面的图片设置width、height后被拉伸的变形了

页面的图片设置width、height后被拉伸的变形了

上一章章节目录下一章 2019-06-06已有4053人阅读 评论(0)

页面的图片设置width、height后被拉伸的变形了


解决方法:

设置了图片的大小后width: 40px;height: 40px;如果图片很小就会被拉伸的不成样。

<img  src="http://192.168.0.107/level/2.gif" style="vertical-align: text-top;cursor:pointer;width: 40px;height: 40px;">


修改为max-width: 40px;max-height: 40px;即可,如果图片小于设定的值,就按照图片原图大小显示,如果图片大小超过设定的值就按照图片原来的比例缩小图片,而不会拉伸变形。

<img  src="http://192.168.0.107/level/2.gif" style="vertical-align: text-top;cursor:pointer;max-width: 40px;height: 40px;">


0

有建议,请留言!

  • *您的姓名:

  • *所在城市:

  • *您的联系电话:

    *您的QQ:

  • 咨询问题:

  • 提 交