我们知道图片宽度可以设置  百分比,但是高度要给一个固定值  不然不生效,并且产品要求图片显示必须是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的更多相关文章

  1. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px,当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  2. 动态设置iframe高度

    <%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...

  3. Android代码中动态设置图片的大小(自动缩放),位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  4. 【微信小程序】动态设置图片大小

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror   ...

  5. siverlight 后台动态设置图片路径的总结

    最近碰到了个问题,需要给一个用户控件中的image动态设置图片资源 1.图片资源属性为resource时,静态引用无任何问题,但是动态设置时,就什么也不显示 后来找到问题所在, 必须把此图片属性项中“ ...

  6. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  7. 使PC端网页宽度自适应手机屏幕大小

    有时候我们会纠结PC页面在手机页面上无法正常显示,超出屏幕,有些内容看不到,现在又了下面的代码,可以做到自适应手机端的屏幕宽度: 在html的<head>中增加一个meta标签: < ...

  8. Vue 动态设置图片路径

      大多数情况vue项目中组件是需要相互引用的,父组件引用子组件,子组件引用父组件,已达到组件重用的目的   本次记录的是父组件引用子组件,img标签定义在多个子组件中,不同或相同的父组件引用同一个子 ...

  9. jquery动态设置图片路径和超链接href属性

    js document.getElementById("myImage").src="hackanm.gif"; jquery $("#img&quo ...

  10. 动态设置uitableview高度,参考

    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { //  ...

随机推荐

  1. c++ sizeof详解

    c语言详解sizeof   原文地址:http://blog.sina.com.cn/s/blog_5da08c340100bmwu.html 一.sizeof的概念   sizeof是C语言的一种单 ...

  2. 图片上传 加水印 以及GDI基本画图

      上传图片并给所上传的图片添加水印 1 HttpPostedFile file = Context.Request.Files[0]; //有这个0说明一次只能上传一张 2 if (file.Con ...

  3. 硬件IIC的7位从机地址查询方式读写参考代码

    目录 本文中使用582测试,在整合先前博客中的代码的基础上,加上读写超时,加上返回值,加上16位从机寄存器地址的判断,希望读写各用一个函数就能解决硬件IIC的使用问题. #include " ...

  4. Python全栈学习笔记---问题总结(五)

    一.全局变量和局部变量 在函数内声明全局变量:globle 二.数值型lis和字符型list转换 数值型list转字符型list 3.x: array = [1, 2, 3, 4, 5,6 ] arr ...

  5. 何同学新视频火了!找到减少沉迷手机的最佳方法:附免费APP

    以优质原创视频吸引百万粉丝的 Up 主"何同学"昨晚(1 月 6 日)上线了最新作品,探讨了如何有效地减少现代人使用或者说沉迷手机的时间. 在视频开头,何同学提到,整理了 5000 ...

  6. 软件工程日报七——checkbox的使用

    今天学了checkbox的使用 activity_main.xml文件为 <?xml version="1.0" encoding="utf-8"?> ...

  7. WPF学习笔记-数据采集与监控项目03-课程总览(ItemsControl控件)

    以下是学习笔记: https://www.bilibili.com/video/BV1gq4y1D76d?p=57&spm_id_from=pageDriver&vd_source=3 ...

  8. andriod升级保错问题归类

    https://developer.aliyun.com/article/1116339 https://www.jianshu.com/p/5d9c790ab958 https://blog.51c ...

  9. (原创)odoo one2many字段以子列表形式显示

    模块详情

  10. springcloud(六) - 配置中心

    功能介绍 设置和业务代码获取配置 功能实现 <!-- 添加configjar --> <dependency> <groupId>org.springframewo ...