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 { // ...
随机推荐
- The table‘xxxx’is full
df -h 查看磁盘 设置 back_log = 50 接受队列,对于没建立 tcp 连接的请求队列放入缓存中,队列大小为 back_log,受限制与 OS 参数,试图设定 back_log 高于你的 ...
- Unity 使用IO流获取PNG/JPG/GIF/BMP的宽高【转】
原文链接:https://blog.csdn.net/flj135792468/article/details/107963280?utm_medium=distribute.pc_relevant. ...
- js树搜索框查询所有匹配节点及父节点(纯js实现)
// 搜索框输入查询树节点(纯前台js) //name 搜索框输入的值: //wgObj.dwtreeDateAll 为树 的全量数据 // titleArr 与输入框匹配的节点数组 //arrTar ...
- keil调试教程
点击跳转 如果开启调试就提示弹框错误2k,说明你没有破解你的keil,网上自行下载注册机. 调试一定要对应自己板子的晶振,否则当你测试你的延时实际时间时,keil里的sec会不一样,甚至离谱.
- django操作WEB涉及的几个命令
1)创建项目bysms django-admin startproject bysms 2)创建应用sales (在bysms目录下执行) python manage.py startapp sale ...
- QT-groupBox组件内的组件失去交互功能
属性设置: 首先 然后 可以实现.
- VS2010配置WTL
1.首先去下载WTL 地址:http://wtl.svn.sourceforge.net/viewvc/wtl/?view=tar 2.安装App Wizard 找到"VS安装目录\VC\V ...
- 最简spring IOC实现
public class Main { public static void main(String[] args) throws Exception { Class<Address> a ...
- 和为K的子数组
给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的连续子数组的个数 . /** * @param {number[]} nums * @param {number} k ...
- ctfshow web入门 命令执行 web29-36
29-36 全是基于get传参执行 eval() 函数,均采用黑名单匹配,不同点在于黑名单的变化 web29 1 error_reporting(0); 2 if(isset($_GET['c'])) ...