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 { // ...
随机推荐
- Windows 11在使用AMD时,CPU占用率持续100%的解决方案
一.现象 Windows 11在使用AMD时,CPU占用率持续100%,持续好几个系统版本都是如此 二.系统版本: 版本 Windows 11 专业工作站版版本 22H2安装日期 2022/10/ ...
- Tech&W_STU_Resource_bookmark
整合资料 1 architecture: Enterprise integration patterns : https://www.enterpriseintegrationpatterns.com ...
- 前端下载csv文件
var str = [ 'ssssssssssssssssssssssssssssssssssssssss' ]; var uri = 'data:text/csv;charset=utf-8,%EF ...
- CTreeCtrl的用法汇总(转)
一 基础操作 1 插入节点 1)插入根节点 //插入根节点 HTREEITEM hRoot; CString str=L"ROOT" hRoot=nTreeCtrl.Insert ...
- [Vue warn]: Do not use built-in or reserved HTML elements as component id: text 错误的解决办法
引入的text 没用,要么注释掉,要么引用
- redis的linux下安装
Linux 源码安装 下载地址:http://redis.io/download,下载最新稳定版本. 本教程使用的最新文档版本为 2.8.17,下载并安装: # wget http://downloa ...
- WIN10操作系统如何利用无线网卡连接wifi再通过有线网卡共享网络给路由(双网卡)
首先有一台笔记本电脑,或者双网卡的电脑(wifi网卡 和 有线网卡) 找到两个个网卡,并重置他们的设置 然后同时选中,右单击选择桥接 桥接成功以后就可以用无线网卡连接wifi,然后把有线网口插上网线直 ...
- (0409) Pycharm 的设置--参数设置(运行.py文件带参数,例如argument) 比如: demo.py -prj xxx
1) https://www.cnblogs.com/yksgzlyh/p/10221960.html 点击"Run"菜单下的"Edit Configurations. ...
- 浪潮QQ群成员提取器 V2022
浪潮QQ群成员提取软件 V2021 最新升级版 使用扫描安全登录QQ,批量获取群列表,然后在读取指定群的群成员列表支持过滤群主.群管理员 支持按最后发言时间提取活跃用户 支持识别僵尸粉和过滤可以导出文 ...
- 搭建ubuntu开发环境
tar -xzvf VMwareTools-10.0.6-3595377.tar.gz cd vmware-tools-distrib 再执行:sudo ./vmware-install.pl ...