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 { // ...
随机推荐
- 前端日期控件,在设置了readonly的情况,还能选择日期的解决办法
去掉只读和增加onclick属性: $("#date").removeAttr("readonly"); $("#date").attr(& ...
- js 页面小数相加精度问题
解决方法:把需要计算的数字升级(乘以10的n次幂)成计算机能够精确识别的整数,等计算完毕再降级(除以10的n次幂),这是大部分编程语言处理精度差异的通用方法. 比如计算0.33和5.2的和,则需要把( ...
- 用例需注意的点-UI自动化
记几条--用例注意事项:用例从功能里面转化而来,并且不能脱离业务(针对某一个页面功能\某一个流程业务,写一条用例:即将界面操作间接转化为代码去操作!)1用例要尽量独立,相互不影响!(单独一条都可运行) ...
- SVN检出未响应,版本库浏览打不开卡死。
今天遇到一个奇葩问题. 1.换了新电脑,首先SVN地址没问题.检出就未响应,不弹出输入用户名,密码. 2.发现装了讯软加密软件,后安装的SVN.(未告知管理员,对新机加密软件配置).配置完可以正常用了 ...
- # huawei--流策略+NAT+单臂路由
huawei--流策略+NAT+单臂路由 项目要求: 公司内部有两个网段,分别为192.168.1.0/24和192.168.2.0/24,使用路由器R1实现单臂路由,并配置流策略,使192.168. ...
- 前端如何给bearer token传值
Bearer token是一种常见的身份验证机制,通常用于Web API和其他Web服务.在前端中,Bearer token通常是通过HTTP头(HTTP header)发送的,具体来说是通过&quo ...
- web基础(3):CSS样式
chapter4 CSS样式 html是网页的内容和结构:CSS是网页的样式.内容和样式相分离,便于修改样式. CSS cascading style sheets 层叠样式表.一个内容上面可以添加多 ...
- Linux网络第六章:PXE高效批量网络装机及kickstart无人值守安装
目录 一.PXE基础知识 二.PXE使用服务 三.高效批量网络装机实操 1.环境准备 2.配置dhcpd服务 3.配置FTP服务 4.配置TFTP服务 5.配置kickstart无人值守 6.启动服务 ...
- Angular JS入门 (一)事件监听(二)多控制器思想与模块化编程(三)路由router
Angular JS入门 ️将流式结构--->模块化 一.事件监听 1.事件监听 前言 NG框架中通过对元素标签添加[ng-事件名] 指令,来对元素添加事件监听 而事件监听的回调函数需要在con ...
- 第四章:用Python对用户的评论数据进行情感倾向分析
文章目录 项目背景 获取数据 情感倾向 senta_bilstm 模型 情感划分 数据描述 数据分析 总体评论倾向 评论分布 各分布的情感倾向 评论分词 去除停用词 绘制词云图 结论 源码地址 本文可 ...