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 { // ...
随机推荐
- nacos启动报错
Caused by: com.alibaba.nacos.api.exception.NacosException: Nacos Server did not start because dumpse ...
- 回归分析 3.X 多元线性回归
多元线性回归模型 参数估计 模型表示 我们先将模型 \[y_{i}=\beta_{0}+\beta_{1} x_{i 1}+\cdots+\beta_{p} x_{i k}+\epsilon_{i}, ...
- vscode自定义工作目录
vscode作为目前最受欢迎的编辑器,一直用vscode,但是最近清理c盘,发现vscode的目录,插件和数据目录,占据了上G的空间,那么,如何自定义 vscode的工作目录和数据目录呢,这里参考了一 ...
- django的模型层(二)
django的模型层(二) 一 创建模型 from django.db import models # Create your models here. class Author(models.Mod ...
- xpath拉取链家二手房信息并保存到excel中
import os.path import requests from lxml import etree import xlwt import xlrd def create_excel(): if ...
- Mysql 索引心得
1. 频繁查询的字段,应该创建索引. 2.更新非常频繁的字段,不应该创建索引. 3.唯一性太差的字段,比如 gender字段,就不应该创建索引. 4.不会出现在where条件之后的字段,不应该创建索引 ...
- 通过 HDU 2048 来初步理解动态规划
HDU 2048 数塔 问题描述: 题目链接-点我查看题目 给出一个数塔,要求从顶层走到底层,每一步只能从高层走到相邻的低层节点,求经过的结点的数字之和最大是多少? 动态规划的定义 dynam ...
- mybatis 数据搜索后参数显示乱码无法搜到
今天写作业的时候遇到的小问题 问题说明:搜索订单名中含有"香皂"的订单,显示订单的一系列属性.在搜索后,调试框中显示的东西很奇怪,也没有查找到答案: 觉得是编码问题,所以调试了编码 ...
- GNSS模块
1. Location服务注册 第一个注册是在 SystemServer 中将 location 服务注册到 ServiceManager中去:第二个注册是在 SystemServiceRegistr ...
- Docker 基础常用命令
Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现虚拟化.Docker是内核 ...