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 { // ...
随机推荐
- N63050 第十四周运维作业
就业和全程班小伙伴本周学习内容: 第二十七天: http协议和web服务器 1http的cookie和session详解 2LAMP架构和CGI与FASTCGI区别 3常见PHP的配置和php程序 4 ...
- 52道常见Python面试题,你都看过了吗?(转发供参考学习)
https://blog.csdn.net/xiaohei3ge/article/details/88080284?utm_medium=distribute.pc_relevant.none-tas ...
- transformers 之Trainer对应的数据加载
基础信息说明 本文以Seq2SeqTrainer作为实例,来讨论其模型训练时的数据加载方式 预训练模型:opus-mt-en-zh 数据集:本地数据集 任务:en-zh 机器翻译 数据加载 Train ...
- containerd 卸载
一.创建脚本 cat > remove.sh <<EOF #!/bin/bash # 删除contained命令及配置 rm -rf /usr/local/bin/ rm -rf / ...
- uni小程序保存base64图片
使用uni.getFileSystemManager().writeFile去下载base64图片<view class="share-btn" @click="s ...
- NSAttributedString 多格式字符串
NSString *aString = @"哈哈标题(必填)"; NSRange range = NSMakeRange(4, 4); //当然也可以查找NSRange range ...
- 在Github上搭建个人主页
最近试着在github上搭建个人主页,没用github给的模板,用的是自己在网上找到那种类似个人主页的模板,到时候直接上传到仓库里就行了 首先先创建仓库,点击右上角的加号,选择New reposito ...
- [CSAPP]第一章 计算机系统漫游 学习笔记
CSAPP 第一章 计算机系统漫游 1.1 信息就是位+上下文 系统中所有信息-----包括磁盘文件.内存中的程序.内存中存放的用户数据以及网络上上传的数据,都是由一串比特表示的.同时区分不同数据对象 ...
- 为win10添加右键“以管理员身份运行MSI”选项
win+r运行regedit以打开注册表编辑器 定位到HKEY_CLASSES_ROOT\Msi.Package\shell 右键shell,新建 项 项名称为runas 双击runas右边的默认,填 ...
- lua 文件读写处理(操作敏感词库)
最近需要给游戏做一个敏感词新系统,我采用的方法是比较常用的DFA(确定有穷状态机)算 法,先不讲算法,而这种算法的实现需要一个相应的敏感词库. 我拿到了词库后发现词库中大概有8000+个词,其中包括很 ...