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 { // ...
随机推荐
- Java定义一个方法处理公司的迟到问题的相关代码
/** * 定义一个方法处理公司的迟到问题 * 1.输入迟到时间和月薪 * 2.处理逻辑: * 迟到1-10分钟,警告 * 迟到11-20分钟,罚款100 * 迟到21-30分钟,罚款200 * 迟到 ...
- linux中磁盘如何由dos格式怎么变为gpt格式
一般情况下,我们进行磁盘分区管理使用gdisk命令比较方便快捷,但假如我们想要大于2T的磁盘使用fdisk命令已经无法使用,此刻我们该怎么办?这时我们可以使用parted命令来把磁盘转换为gpt格式, ...
- 肖sir__整理项目链接
项目链接: https://www.cnblogs.com/xiaolehong/p/16460523.html 保险项目https://www.cnblogs.com/xiaolehong/p/16 ...
- Vue 实现点击空白处隐藏某节点
手动监听判断 <template> <div> <span ref="projectButton"> <el-popover v-mode ...
- c--> #define 定义宏
#define 定义宏 宏(Macro)是预处理命令的一种,它允许用一个标识符来表示一个字符串 1.有关定义宏的代码末尾不需要添加":"(分号) 2.定义宏define在计算的式子 ...
- 电脑安装不同版本的QT
系统:windows Qt版本:5.10/5.13 电脑中已经安装5.10版本的,安装5.13版本的不知道是否会出现问题,故此记录. 下载安装Qt5.13,安装过程跟之前版本的基本没差别,安装路径 D ...
- VS/QT--调用第三方库dll总结
假设外部第三方库为 test.h,test.lib,test.dll, 调用的函数是 int fnTest(int param); 一.VS中的静态调用和动态调用 1.1 静态调用 静态调用需要用到 ...
- mysql 创建函数失败解决办法,版本 8.0.26
报错信息:[Err] 1418 - This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declarat ...
- 24js Number(数字)对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- verilog Signed与赋值形式
`timescale 1ns/1ps module test; reg signed[3:0] uu; reg signed[3:0] dd; reg [2:0] extract; reg [4:0] ...