PC端 图片宽度是百分比,动态设置图片高度为 6:9
我们知道图片宽度可以设置 百分比,但是高度要给一个固定值 不然不生效,并且产品要求图片显示必须是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的更多相关文章
- css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)
1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div 设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...
- 动态设置iframe高度
<%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...
- Android代码中动态设置图片的大小(自动缩放),位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
- 【微信小程序】动态设置图片大小
我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src 图片资源地址2.mode 图片裁剪.缩放的模式3.binderror ...
- siverlight 后台动态设置图片路径的总结
最近碰到了个问题,需要给一个用户控件中的image动态设置图片资源 1.图片资源属性为resource时,静态引用无任何问题,但是动态设置时,就什么也不显示 后来找到问题所在, 必须把此图片属性项中“ ...
- 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件
当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...
- 使PC端网页宽度自适应手机屏幕大小
有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...
- Vue 动态设置图片路径
大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的 本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...
- jquery动态设置图片路径和超链接href属性
js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...
- 动态设置uitableview高度,参考
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { // ...
随机推荐
- Cookie之记录用户上次访问时间
Cookie之记录用户访问时间 需求: 需求: 1:用户访问服务器(Servlet),判断用户是否是第一次访问,如果是第一次访问,则在页面响应内容为:"您好,欢迎您首次访问"; 2 ...
- python调用c/c++方法
# python调用c/c++方法:一般先将c++代码转化为C类型dll(推荐使用静态dll,否则容易出现各种链接库问题;记得使用extern "C" _declspec(dlle ...
- 对象可能是类数组对象 不具备数组的原型内的方法 所以可以用call或者apply把this指向改成数组或对象原型
const arr = [] 2Object.prototype.toString.call(arr) === '[object Array]' // true 3 4 const obj = {} ...
- JavaScript 数字与字符串的加减乘除运算
点击跳转 Tips: 除开字符串 + 数字的运算,会产生级联,其他情况下会将 String 转为 number 再进行数字运算. js 运算是从左到右的,所以一步一步来,不要跳步进行运算.
- 华为&思科设备默认的路由协议优先级
华为&思科设备默认的路由协议优先级 华为设备默认路由协议优先级 在华为的设备中,路由器分别定义了外部优先级和内部优先级. 外部优先级是指用户可以手工为各路由协议配置的优先级; 内部优先级不能被 ...
- Kubernetes--Pod存活性探测(设置HTTP探针)
基于HTTP的探测(HTTPGetAction)向目标容器发起一个HTTP请求,根据其响应码进行结果判定,响应码形如2xx或者3xx时表示检测通过."sepc.containers.live ...
- Win10删除此电脑默认的7个文件夹
删除方法 用记事本拷贝以下内容,改文件后缀为reg,然后点击执行. Windows Registry Editor Version 5.00 ;如需还原去除上语句前减号即可 ;取消我的电脑" ...
- Win10打开Autodesk软件时提示“管理员已阻止你运行此应用”
Win10用户的最大困扰就是系统的安全性太高,导致很多软件在运行时总是会报错,这不,又有同学遇到了下面的问题: 当你的电脑跳出这么鲜红的界面你是不是很想砸了它....手下留脑~它还能再奋斗两年. 出现 ...
- GIT Authentication failed for错误问题处理
1. Settings ==> Developer settings ==> Personal access tokens ==> Generate new token 生成新的 ...
- supervisord and pm2 进程守护工具
目录 安装 pm2 config pm2是一个带有负载均衡功能的应用进程管理器,类似有Supervisor,forever supervisor 特点: 代码修改,实时重启 安装 npm instal ...