我们知道图片宽度可以设置  百分比,但是高度要给一个固定值  不然不生效,并且产品要求图片显示必须是9:6,这开始确实难倒我了

后面想了一下用js  获取图片宽度  动态的计算高度就行了,超简单

        setDomHeight()
// 监控窗口宽度变化
$(window).resize(function(){
setDomHeight()
}); function setDomHeight() {
let imgBoxDom = $(".model_team_m_new").children("li").children('.model_team_m_img')
let imgBoxWidth = $(".model_team_m_new").children("li").children('.model_team_m_img').width()
let imgHeight = (imgBoxWidth / 9) * 6
imgBoxDom.height(imgHeight)
}

  效果如下

搜索

复制

PC端 图片宽度是百分比,动态设置图片高度为 6:9的更多相关文章

  1. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  2. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  3. Android代码中动态设置图片的大小(自动缩放),位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  4. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  5. siverlight 后台动态设置图片路径的总结

    最近碰到了个问题,需要给一个用户控件中的image动态设置图片资源 1.图片资源属性为resource时,静态引用无任何问题,但是动态设置时,就什么也不显示 后来找到问题所在, 必须把此图片属性项中“ ...

  6. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  7. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  8. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

  9. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  10. 动态设置uitableview高度,参考

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { //  ...

随机推荐

  1. Cookie之记录用户上次访问时间

    Cookie之记录用户访问时间 需求: 需求: 1:用户访问服务器(Servlet),判断用户是否是第一次访问,如果是第一次访问,则在页面响应内容为:"您好,欢迎您首次访问"; 2 ...

  2. python调用c/c++方法

    # python调用c/c++方法:一般先将c++代码转化为C类型dll(推荐使用静态dll,否则容易出现各种链接库问题;记得使用extern "C" _declspec(dlle ...

  3. 对象可能是类数组对象 不具备数组的原型内的方法 所以可以用call或者apply把this指向改成数组或对象原型

    const arr = [] 2Object.prototype.toString.call(arr) === '[object Array]' // true 3 4 const obj = {} ...

  4. JavaScript 数字与字符串的加减乘除运算

    点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.

  5. 华为&思科设备默认的路由协议优先级

    华为&思科设备默认的路由协议优先级 华为设备默认路由协议优先级 在华为的设备中,路由器分别定义了外部优先级和内部优先级. 外部优先级是指用户可以手工为各路由协议配置的优先级; 内部优先级不能被 ...

  6. Kubernetes--Pod存活性探测(设置HTTP探针)

    基于HTTP的探测(HTTPGetAction)向目标容器发起一个HTTP请求,根据其响应码进行结果判定,响应码形如2xx或者3xx时表示检测通过."sepc.containers.live ...

  7. Win10删除此电脑默认的7个文件夹

    删除方法 用记事本拷贝以下内容,改文件后缀为reg,然后点击执行. Windows Registry Editor Version 5.00 ;如需还原去除上语句前减号即可 ;取消我的电脑" ...

  8. Win10打开Autodesk软件时提示“管理员已阻止你运行此应用”

    Win10用户的最大困扰就是系统的安全性太高,导致很多软件在运行时总是会报错,这不,又有同学遇到了下面的问题: 当你的电脑跳出这么鲜红的界面你是不是很想砸了它....手下留脑~它还能再奋斗两年. 出现 ...

  9. GIT Authentication failed for错误问题处理

    1. Settings ==> Developer settings ==> Personal access tokens ==> Generate new token   生成新的 ...

  10. supervisord and pm2 进程守护工具

    目录 安装 pm2 config pm2是一个带有负载均衡功能的应用进程管理器,类似有Supervisor,forever supervisor 特点: 代码修改,实时重启 安装 npm instal ...