我们知道图片宽度可以设置  百分比,但是高度要给一个固定值  不然不生效,并且产品要求图片显示必须是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. 流(stream)如何理解?

    前言 如果你搜索输入输出函数,那么你会看到各种各样的流.那么这个流到底是什么东西呢,本文将形象地类比介绍通用的流. 怎样理解通用的流 流,顾名思义就是像水流一样可以流动的事物,可以在不同的领域来去自如 ...

  2. FMC DA子卡设计原理图:FMCJ465-2路 16bit 12.6GSPS FMC DA子卡

    FMCJ465-2路 16bit 12.6GSPS FMC DA子卡 一.板卡概述:      FMCJ465是一款转换速率最高为12.6GSPS 的 DAC 回放板,DAC位数16bit; 板卡基于 ...

  3. ts面试题

    1.ts的内置数据类型2.ts中any和unknown3.如何将unknown指定为更具体的类型4.说说对ts中命名空间与模块的理解?区别?5.对ts的理解,和js的区别6.tsconfig.json ...

  4. Appium获取元素坐标

    文章转自:https://www.cnblogs.com/lfr0123/p/13686769.html appium做app自动化测试过程中,有时需要获取控件元素的坐标进行滑动操作.appium中提 ...

  5. Mysql压缩包版本安装

    之前一直使用的是安装包,今天懒得去下载了,直接用压缩包安装,记录一下. 1.先去官网下载压缩包.https://dev.mysql.com/downloads/mysql/8.0.html 2.将文件 ...

  6. 利用Opencv+Python 实现二维码识别

    pip3 install pyzbar   准备工作: 二维码图片,我这里直接打印在了一张A4纸上,或者直接在草料网站上生成 草料二维码生成器,存放在手机上进行显示.在安装条码扫描库的时候大家注意:z ...

  7. UE4大地图(流关卡、无缝地图)

    原作者:xiaosongfang 对于UE4来说我只是个菜鸟,研究一下网上的教程稍微尝试的做一下demo,所以可能下面会有描述不准确或者说没解释清的地方请多谅解哈.也非常欢迎指出我说的不对的地方一起学 ...

  8. Apache和Nginx设置伪静态(URL Rewrite)的方法

    在Apache中有两种方法配置,一是通过httpd.conf文件,二是通过.htaccess文件. 使用 httpd.conf 来配置 rewrite 策略. 要使用 httpd.conf 文件来设置 ...

  9. 4、Hadoop初识

  10. 19_webpack_externals

    假如我们购买了CDN服务器为我们的网站的访问速度进行优化,那么我们,该如何配置 假如我的CDN为:https://mr-hou88888/cdn/那么publicPath该如何配置 1.配置publi ...