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环境同时安装多个版本的Python解释器(python2和python3)
https://blog.csdn.net/qq_21583139/article/details/125881382 出现问题: 更新pip 操作后出现,pip报错,应该是升级到最新pip版本然后和 ...
- java正则匹配字符串最外层{}里的内容,包含{}
String s = "start {sffff''{adfaw3ea}wfewrfwef----}";String regex = "(?<=\\{).*(?=\ ...
- Linux环境使用Docker安装GitLab
系统环境: CentOS 7.6 64位(同样适用于Ubuntu) 安装步骤: 1.创建文件夹 /home/docker/gitlab/etc /home/docker/gitlab/log /hom ...
- Linux docker 安装nginx 配置ssl证书
Linux docker 安装nginx 配置ssl证书 如果觉得样式不好:跳转即可 md文件复制过来有些样式会不一样) 原文地址:https://lifengying.site/archives/b ...
- 2022-04-26内部群每日三题-清辉PMP
1.一家组织的经验教训数据库表明过去的重大项目问题是质量失败.项目经理在制定质量管理过程时决定做得更彻底.为确保质量,项目经理应该怎么做? A.根据项目的范围和需求制定质量管理计划. B.将所有质量控 ...
- c# Winform 缓动动画
一.定义缓动动画类public class AnimationHelper { Timer animationTimer = new Timer(); double velocity = 0.0; P ...
- nohup--将程序放入后台执行
作用:可以将程序以忽略挂起信号的方式运行,常与&一起使用 语法: nohup Command [ Arg - ] [ & ] 将程序放到后台运行的方法: command & ...
- python 嵌套对象转为dict
as_dict(self, keys=None, exclude_keys=None): """ 将ORM对象序列化为字典 :param keys: :return: & ...
- vue3.0 dialog无法弹出的问题
最近用elementui做了点东西,一直感觉挺好的,但是嫖的别人的框架是vue3.0,这次的dialog就弹不出来了. 经过多方查证,发现vue3.0的element为了适配移动端升级为element ...
- IaaS--云上虚拟网络(何恺铎《深入浅出云计算》笔记整理)
[概念] 虚拟私有网络(Virtual Private Cloud,简称 VPC),是云计算网络端最重要的概念之一,它是指构建在云上的.相互隔离的.用户可以自主控制的私有网络环境.虚拟私有网络有时也称 ...