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 { // ...
随机推荐
- 区块链leveldb数据库安装
一.首先,需要在电脑上安装boost库. 下载地址在这里,下载压缩包之后解压,Index of main/release/1.79.0/source. 解压完成后在解压好的文件夹里面进入cmd,之后运 ...
- Spring的IOC源码分析
Spring IOC 容器源码分析 Spring 最重要的概念是 IOC 和 AOP,本篇文章其实就是要带领大家来分析下 Spring 的 IOC 容器.既然大家平时都要用到 Spring,怎么可以不 ...
- VM部署服务后设置局域网内其他人访问
第一种方式:虚拟机设置中,网络适配器选择桥接模式,此时虚拟机IP号段与局域网处于同一号段,局域网内其他人使用虚拟机IP+端口即可访问服务 将虚拟机IP设为静态IP,我的虚拟机系统为Ubuntu20.0 ...
- go简单写个ini配置文件读取工具
直接上代码: 1 package main 2 3 import ( 4 "fmt" 5 "io/ioutil" 6 "reflect" 7 ...
- pdf导出 预览、直接打印、打印加预览
前台: var xueurl = "fileFormatController.do?getXbDetail_print&id=&codes=" + rowsData ...
- 转载--文章(感谢米粒儿博主分享) 关于 Json.net序列化时间问题
http://www.cnblogs.com/lxsweat/p/4372508.html 上代码 其中的使用方法和UserInfo实体对象就不贴代码了. /// <summary> // ...
- boost asio 网络编程案例简单改写
boost教程:http://zh.highscore.de/cpp/boost/ 改写7.4网络编程案例,服务器支持连接多个客户端 服务端: #include <iostream> #i ...
- .Net core 基础 创建及Nlog
一..Net Core 依赖注入 .net core3.1 之前的版本需要手动配置swagger.当前项目.net core5.0版本自动配置完成 跨域配置 1.下载依赖包 2. ...
- js获取对象数组中指定属性值的新数据
例: let arr = [ {name: "name1", age: "1",type:"1"}, {name: "name2& ...
- 掌控安全学院SQL注入靶场-布尔盲注(三)
测试了username参数,没有发现注入 123456' or '1'='1 123456' or '1'='2 第二种注入方法