width: expression(this.width > 50

最新推荐文章于 2021-08-03 19:11:25 发布
转载 最新推荐文章于 2021-08-03 19:11:25 发布 · 2.8k 阅读 · 0
文章标签：

#html #css

本文介绍了一种使用CSS实现图片按比例缩放到50px*50px以内的方法，适用于网页设计中对图片尺寸控制的需求。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

width: expression(this.width > 50
2007-04-17 22:17

一副大图片按比例缩小到50px*50px以内，可以参照以下这段CSS：

thumbImage {
     max-width: 50px;
     max-height: 50px;
}
* html .thumbImage {
     width: expression(this.width > 50 && this.width > this.height ? 50 : true);
     height: expresion(this.height > 50 ? 50 : true);
}

 
cxzhq2002
关注
GEE错误——Error: Image.setDefaultProjection, argument ‘image‘: Invalid type. Expected type: Image
此星光明博客
02-15 2172
Mean_Daily_LST_2010-2011ID: BETBRX6ZU6N5BUY7PJ3J6VFDPhase: FailedRuntime: 1s (started 2024-02-10 19:21:49 +0800)Attempted 1 timeError: Image.setDefaultProjection, argument 'image': Invalid type. Expected type: Image. Actual type: ImageCollec
关于CSS中expression
epbon的专栏
08-18 3369
在网上第一次注意到css里有expression这个属性，于是搜索了一下，得到了一下相关知识贴出来也许对大家有所帮助，感谢原作者的劳动。CSS中expression使用简介作者：dozb定义IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas
CSS中使用expression完美设置页面最小宽度
weixin_33748818的博客
12-15 1014
2019独角兽企业重金招聘Python工程师标准>>> ...
实现最小宽度的几种方法及CSS Expression[转]
u011927449的博客
01-21 445
实现最小宽度的几种方法及CSS Expression[转] 实现最小宽度的几种方法：css表达式尽量不用 支持FF IE7IE6 .test { ...
浏览器无法引用css,解决expression在Chrome浏览器不能加载css的问题
weixin_33013787的博客
08-03 955
先看一段HTML代码，在下边这段代码中，这张图片的宽度未知，我想写在CSS中写一行限制最大宽度为50px：Firefox或IE较高的版本可以直接写max-width。在IE的低版本浏览器中，我们可能会写如下的代码：#test img{width: expression(this.width > 50 ? '50px': true); max-width: 50px; }但上边的代码会有一个性...
CSS中的行为expression
桂林哈秋 - 我想学编程
11-22 661
原文：http://www.visc.cn/blog/post/318.html注意:不是非常需要，一般不建议使用expression，因为expression对浏览器资源要求比较高。IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javascript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javasc
El表达式使用问题javax.el.ELException:Failed to parse the expression的解决方式
10-17
=`, `, `>`, `, `>=`）、逻辑运算符（`&&`, `||`, `!`）等。 此外，EL表达式还可以与JSTL（JavaServer Pages Standard Tag Library）结合使用，增强JSP页面的功能，例如进行条件判断、循环控制等。 在实际开发中，...
让IE6支持兼容min-width、max-width CSS样式属性的方法
09-24
_width: expression(this.scrollWidth > 620 ? "620px" : (this.scrollWidth < 1 ? "1px" : "auto")); } ``` 这段代码将确保图片宽度不会超过620px，同时至少保持1像素的宽度。在更复杂的情况下，可以结合使用 `...
// src/utils/circleRippleMaterialProperty.js class CircleRippleMaterialProperty { constructor(options = {}) { this._definitionChanged = new Cesium.Event(); this._color = Cesium.defaultValue(options.color, Cesium.Color.BLUE); this._speed = Cesium.defaultValue(options.speed, 3.0); this._count = Cesium.defaultValue(options.count, 6); this._gradient = Cesium.defaultValue(options.gradient, 0.1); // GLSL着色器源码 this._source = ` uniform vec4 color; uniform float speed; uniform float count; uniform float gradient; czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; float time = czm_frameNumber * speed / 1000.0; float d = distance(st, vec2(0.5, 0.5)); // 多圈波纹效果 float alpha = 0.0; for(float i = 0.0; i < count; i++) { // 波纹方程：sin(波纹密度 * d - 时间 * 角频率 - 相位偏移) float ripple = sin(d * 20.0 - time * 2.0 - i * 0.5); // 边缘平滑过渡 float fade = smoothstep(0.0, 0.3, d) * (1.0 - smoothstep(0.3, 0.5, d)); // 边缘渐变效果 alpha += abs(ripple) * fade * pow(1.0 - d, gradient * 10.0); } material.alpha = alpha * color.a; // 颜色混合：中心到边缘渐变 material.diffuse = mix(color.rgb, vec3(1.0), d * 0.5); return material; }`; } get isConstant() { return false; } get definitionChanged() { return this._definitionChanged; } get color() { return this._color; } set color(value) { this._color = value; } get speed() { return this._speed; } set speed(value) { this._speed = value; } get count() { return this._count; } set count(value) { this._count = value; } get gradient() { return this._gradient; } set gradient(value) { this._gradient = value; } getType() { return 'CircleRipple'; } getValue(time, result) { if (!result) result = {}; result.color = this._color; result.speed = this._speed; result.count = this._count; result.gradient = this._gradient; return result; } equals(other) { return this === other || (other instanceof CircleRippleMaterialProperty && Cesium.Color.equals(this._color, other._color) && this._speed === other._speed && this._count === other._count && this._gradient === other._gradient); } } // 注册材质类型到Cesium Cesium.Material.CircleRippleType = 'CircleRipple'; Cesium.Material._materialCache.addMaterial(Cesium.Material.CircleRippleType, { fabric: { type: Cesium.Material.CircleRippleType, uniforms: { color: new Cesium.Color(0.0, 0.8, 1.0, 0.6), speed: 3.0, count: 6.0, gradient: 0.1 }, source: new CircleRippleMaterialProperty()._source }, translucent: function() { return true; } }); export default CircleRippleMaterialProperty; 这个为circleRippleMaterialProperty.js文件，CesiumViewer.vue文件代码如下所示：<!-- src/components/CesiumViewer.vue --> <template> <div class="cesium-container"> <div class="title">Cesium动态波纹效果 - 科技蓝</div> <div id="cesium-container"></div> <div class="control-panel"> <h3>波纹参数控制</h3> <div class="slider-container"> <label>波纹速度 <span class="value-display">{{ rippleSpeed.toFixed(1) }}</span></label> <input type="range" v-model="rippleSpeed" min="0.1" max="10" step="0.1"> </div> <div class="slider-container"> <label>波纹数量 <span class="value-display">{{ rippleCount }}</span></label> <input type="range" v-model="rippleCount" min="1" max="12" step="1"> </div> <div class="slider-container"> <label>波纹大小 <span class="value-display">{{ rippleSize }}</span>米</label> <input type="range" v-model="rippleSize" min="100" max="2000" step="50"> </div> <div class="slider-container"> <label>边缘渐变 <span class="value-display">{{ rippleGradient.toFixed(2) }}</span></label> <input type="range" v-model="rippleGradient" min="0" max="1" step="0.05"> </div> <div class="coordinates"> <strong>定位坐标:</strong><br> 经度: {{ position.longitude }}<br> 纬度: {{ position.latitude }} </div> </div> </div> </template> <script> import 'cesium/Build/Cesium/Widgets/widgets.css'; import CircleRippleMaterialProperty from '@/utils/circleRippleMaterialProperty'; export default { name: 'CesiumViewer', data() { return { viewer: null, rippleEntity: null, position: { longitude: 113.194006, latitude: 27.399411 }, rippleSpeed: 3.0, rippleCount: 6, rippleSize: 500, rippleGradient: 0.1 }; }, watch: { rippleSpeed(newVal) { if (this.rippleEntity) { this.rippleEntity.ellipse.material.speed = newVal; } }, rippleCount(newVal) { if (this.rippleEntity) { this.rippleEntity.ellipse.material.count = newVal; } }, rippleSize(newVal) { if (this.rippleEntity) { this.rippleEntity.ellipse.semiMinorAxis = newVal; this.rippleEntity.ellipse.semiMajorAxis = newVal; } }, rippleGradient(newVal) { if (this.rippleEntity) { this.rippleEntity.ellipse.material.gradient = newVal; } } }, mounted() { this.initCesium(); }, beforeDestroy() { if (this.viewer && !this.viewer.isDestroyed()) { this.viewer.destroy(); } }, methods: { initCesium() { // 初始化Cesium Viewer this.viewer = new Cesium.Viewer('cesium-container', { animation: false, timeline: false, baseLayerPicker: true, geocoder: true, homeButton: true, sceneModePicker: true, navigationHelpButton: false, fullscreenButton: true, infoBox: false, terrainProvider: Cesium.createWorldTerrain() }); // 添加科技蓝波纹效果 const position = Cesium.Cartesian3.fromDegrees( this.position.longitude, this.position.latitude ); this.rippleEntity = this.viewer.entities.add({ name: '科技蓝动态波纹', position: position, ellipse: { semiMinorAxis: this.rippleSize, semiMajorAxis: this.rippleSize, height: 0, material: new CircleRippleMaterialProperty({ color: Cesium.Color.fromCssColorString("#00FFFF").withAlpha(0.6), speed: this.rippleSpeed, count: this.rippleCount, gradient: this.rippleGradient }) } }); // 添加中心点标记 this.viewer.entities.add({ position: position, point: { pixelSize: 12, color: Cesium.Color.fromCssColorString("#FF00FF"), outlineColor: Cesium.Color.WHITE, outlineWidth: 2 }, label: { text: '波纹中心', font: '14px sans-serif', fillColor: Cesium.Color.WHITE, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 2, verticalOrigin: Cesium.VerticalOrigin.TOP, pixelOffset: new Cesium.Cartesian2(0, -20) } }); // 添加坐标点标记 this.viewer.entities.add({ position: position, label: { text: `经度: ${this.position.longitude}\n纬度: ${this.position.latitude}`, font: '12px monospace', fillColor: Cesium.Color.CYAN, style: Cesium.LabelStyle.FILL_AND_OUTLINE, outlineWidth: 1, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, pixelOffset: new Cesium.Cartesian2(0, -50), backgroundColor: new Cesium.Color(0.1, 0.1, 0.1, 0.7), padding: new Cesium.Cartesian2(8, 8) } }); // 调整相机位置 this.viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( this.position.longitude, this.position.latitude, 2000 ), orientation: { heading: Cesium.Math.toRadians(0), pitch: Cesium.Math.toRadians(-60), roll: 0 }, duration: 2.0 }); // 添加科技感背景 this.viewer.scene.backgroundColor = Cesium.Color.fromBytes(10, 20, 40); this.viewer.scene.globe.baseColor = Cesium.Color.fromBytes(30, 40, 70); this.viewer.scene.globe.enableLighting = true; this.viewer.scene.fog.enabled = true; this.viewer.scene.fog.density = 0.0001; this.viewer.scene.fog.minimumBrightness = 0.01; } } }; </script> <style scoped> .cesium-container { position: relative; width: 100%; height: 100vh; overflow: hidden; } #cesium-container { width: 100%; height: 100%; } .title { position: absolute; top: 20px; left: 20px; color: #00ffff; background: rgba(0, 20, 40, 0.7); padding: 10px 15px; border-radius: 5px; z-index: 1000; font-size: 18px; text-shadow: 0 0 10px rgba(0, 200, 255, 0.8); } .control-panel { position: absolute; top: 20px; right: 20px; background: rgba(40, 44, 52, 0.8); padding: 15px; border-radius: 8px; color: #61dafb; z-index: 1000; box-shadow: 0 0 15px rgba(0, 200, 255, 0.5); max-width: 280px; } .control-panel h3 { margin-top: 0; color: #00ffff; text-align: center; border-bottom: 1px solid #00aaff; padding-bottom: 8px; } .slider-container { margin: 12px 0; } label { display: block; margin-bottom: 5px; font-size: 14px; } input[type="range"] { width: 100%; margin: 5px 0; background: linear-gradient(to right, #0088ff, #00ffff); height: 6px; border-radius: 3px; outline: none; } .value-display { display: inline-block; width: 40px; text-align: right; font-size: 14px; } .coordinates { background: rgba(0, 40, 80, 0.7); padding: 8px; border-radius: 4px; margin-top: 10px; font-size: 13px; } </style> 基于此修改好两个的代码发我
最新发布
07-06
<think>我们正在处理一个在Cesium自定义材质（CircleRippleMaterialProperty）中出现的片段着色器编译错误。错误信息明确指出：在循环中，循环索引`i`不能与非常量表达式进行比较。这是因为在WebGL 1.0（基于OpenGL ...
(this->geometry().x() + (this->width()-Dialog_Confirm.width())/2, this->geometry().y() + (this->height()-Dialog_Confirm.height())/2, 320, 185 ); qDebug() << "geometry().x()" <<QString::number(parent->geometry().x(), 10);编译报错error: expected primary-expression before ‘.’ token | ^
03-18
<think>嗯，用户遇到了C++ Qt编译错误，具体是使用geometry()函数时出现“expected primary-expression before '.' token”。我需要先理解这个错误的原因。首先，应该检查语法是否正确。在Qt中，geometry()是QWidget...
【死记硬背】CSS常用属性和注意事项
weixin_30786657的博客
03-11 212
★超出省略号代替 {display:block;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 需要多个属性配合 强制不换行white-space:nowrap; 自动换行word-wrap: break-word;word-break: normal; 强制英文单词断行word-break:brea...
html怎么设置扩大缩小不变形,DiV里CSS控制图片按比例扩大缩小不变形
weixin_32916125的博客
06-15 5189
一般来说，我们设定一定宽度高度的div标签，在里面放上图片，只有当图片大小尺寸符合这个宽度和高度的时候显示最佳。那有的时候不同的界面，同样的信息(比如头像)放大的尺寸是不一样，怎么才能让图片根据DIV的宽高度进行，缩放呢？其实很简单，只用设置其css样式即可，css样式如下：.photo img{max-width:80px;/*这是DIV的大小*/width:expression(this.wi...
css控制图片自适应大小
xdh1996的博客
04-25 1310
相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非，但只要使用以下的CSS语句即可解决。 该CSS的功能是：大于600的图片自动调整为600显示。 <style type="text/css"> <!-- img {width:expression(this.width>600?"600px":this.width+"px");} } ...
Expression 使之支持css的一些属性
weixin_34417183的博客
01-04 119
为什么80%的码农都做不了架构师？>>> ...
使用CSS Expression解决某些浏览器兼容问题
热门推荐
Happy_999‘Blog
07-17 1万+
<br />虽然无奈，但是不想一有什么就去写JS，冲突也会是个头痛的问题，所以这个Expression还是挺有用的，在CSS代码后插入expression语句，自定义控制属性，只被IE识别的方法，通常针对IE6及其一下的版本居多，IE7对CSS的支持已经有了很大改进，会用到的情况比较少，IE8已宣布在其标准模式下不再支持这一语句，呵呵，多好啊，以后为不同版本的IE还要多写几份HACK，咱们不怕没工作做了哩~~无奈到想哭。。。<br />1. min-width/max-width 控制容器最小宽度或图片最大
css expression
weixin_30270561的博客
11-13 174
概述 使用 优点 缺陷 实际应用 总结 概述 　　css expression(css表达式)又称Dynamicproperties(动态属性)是早期微软DHTML的产物，以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作用，从IE5开始得到支持，后因标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值