首页 > html教程 > 正文

html页面中图片长宽不一需要根据父级长宽全图不拉伸显示的做法

转载 2019-02-12 0 112

html页面中图片长宽不一需要根据父级长宽全图不拉伸显示的做法

日常排版中会经常遇到需要img标签图片根据父级的width和height全图不拉伸显示,通常做法是直接图片的width设置为100%,但是如果height的值比width大显示效果就不那么和谐了,所以当有这种情况发生时就需要通过jQuery或者原生JavaScript获取height并判断height的值,然后修改元素css样式。

$('.mallbox img').each(function(){if($(this).height()>200){$(this).css({"width":"auto","height":"100%"})}})

  1. 获取需要判断的img元素;

  2. 遍历每个元素的height是否超出了设定的值(200);

  3. 如果超出修改元素显示方式保持显示统一。

相关文章


  • 高端的医院官网响应式模板PSD和HTML+后台界面HTML皮肤套装下载
  • 应届生4天的时间来制作一个简单的HTML按钮和CSS,应该解雇他吗?
  • linux下word、excel转pdf、html;pdf转swf;ppt转图片操作来一波
  • 网页设计技术基础之HTML中文本的常用标签及语义语法属性介绍
  • web技术:动态页面技术jsp和html有啥不同?在编程能有哪些应用?
  • 零基础学习HTML之CSS篇元素显示模式文档流元素浮动和布局
  • 想要成为最好的Web开发人员?十种方式测试你的HTML和CSS编程技能
  • 西安北邮在线靠谱吗?​我放弃画画来北邮在线学HTML!