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 { // ...
随机推荐
- Linux软件安装与进程管理
Linux软件安装与进程管理 1.软件包分类 首先呢,在学习rpm与yum命令之前,我想先给大家介绍一下Linux软件包的分类,也就是我们常说的安装包,window的软件包是.exe结尾文件,也就是应 ...
- c++ 时间类型详解 time_t(转)
原文链接:https://blog.csdn.net/love_gaohz/article/details/6637625 Unix时间戳(Unix timestamp),或称Unix时间(Unix ...
- js 字符串中提取ip地址
方法1: var reg = new RegExp(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/);var str = 'http://172.38.172.10:8000 ...
- PID名词解析
在工程实际中,应用最为广泛的调节器控制规律为比例.积分.微分控制,简称PID控制,又称PID调节. 当被控对象的结构和参数不能完全掌握,或得不到精确的数学模型时,控制理论的 其它技术难以采用时,系统控 ...
- Pytest初识
一.单元测试框架简介 1. 什么是单元测试 单元测试是指在软件开发过程中,针对软件的最小单位(函数,方法)进行正确性的检查测试. 2. 常用单元测试框架 2.1 Java 类别 junit testn ...
- OS复盘
OS复盘 OS课设已经结课一段时间了,我也从其他课程中抽身出来,有了一段能够好好反思的时光. 说实话,完成OS课设的过程是很痛苦的,指导书蜻蜓点水.注释模棱两可.各种函数和文件调用杂乱无章.每次在完成 ...
- TCP三次握手四次挥手内容及步骤
TCP特性 1.工作在传输层 2.面向连接的协议 3.全双工协议 4.半关闭 5.错误检查 6.将数据打包成段,排序 7.确认机制 8.数据恢复.重传 9.流量控制.滑动窗口 10.拥塞控制,慢启动和 ...
- docker 安装mongodb
一.安装mongodb 我们首先改一下镜像源,避免拉去速度太慢 创建daemon.json文件:位于/etc/docker目录下: 登录阿里云 即可 2.docker 搜索mongo镜像 然后pull ...
- keycloak 找出特定客户端权限的user 配置OTP
背景:项目组中有用到keycloak给两个应用进行登录认证使用.其中有一个应用放在公网,安全部门同事说 不能直接账号密码登录,容易破解,需要进行二次验证. 刚好查到keycloak支持OTP(one ...
- dockerfile配置远程ssh登录
1.dockerfile FROM ubuntu:20.04 RUN DEBIAN_FRONTEND="noninteractive" apt-get update &&a ...