热门标签
当前位置: CSS > 正文
根据父div大小按比例调整图像大小
作者：思考机器5 | 2023-05-07 15:11:48
赞
踩
javascript,css,jquery,jquery-ui,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员工具,站长工具
我使用完整的浏览器宽度高度jquery blockUI来显示从库中选择的图像.在图像下面是blockUI中的视图方案.
基本上在侧面块的视图中,宽度和高度设置为100%.
里面还有两个div.右边的宽度设置为视图的80%,它包含图像.
图像的宽度和高度设置为100%(但我知道这是错误的).
我在此处显示的图像是用户上传的原始尺寸的图像.但如果显示器是1024x768并且上传的图像是600x1900,那么我不知道该图像是什么从屏幕上消失.
那么如何解决这个问题来显示图像居中和比例？
1> Andy E..：
使用max-width和max-height,如果需要支持,则需要在IE 6中使用JavaScript:
#blockUI img {
max-width: 100%;
max-height: 100%;
}
这样可以img在调整大小时保持元素的纵横比,最大可能的宽度和高度.
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/CSS/detail/6169
推荐阅读
- 如何解决《用于设置线性渐变动画的jQuery脚本》经验，为你挑选了0个好方法。css,jquery,progress,css3,css-animations,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解... [详细]
赞
踩
- 如何解决《右边界渐变》经验，为你挑选了1个好方法。html,css,css3,webkit,chrome,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开... [详细]
赞
踩
- 如何解决《GooglefontsAPI会生成CSS2.1验证错误》经验，为你挑选了1个好方法。css,w3c,css3,css-validator,go,html,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,js... [详细]
赞
踩
- 如何解决《CSS边界半径验证错误》经验，为你挑选了1个好方法。css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发... [详细]
赞
踩
- IE9及以下版本不支持css3动画；CSS3动画对低版本的浏览器的支持效果并不是很好，特别是IE9及以下版本，更是无法支持；而css3动画就是指使元素从一种样式逐渐变化为另一种样式的效果。ie,css3,css,DevBox,在线流程图,编... [详细]
赞
踩
- 如何解决《如何制作具有平面外观的输入提交按钮？》经验，为你挑选了1个好方法。html,css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发... [详细]
赞
踩
- 如何解决《如何为每个链接设置不同的悬停颜色》经验，为你挑选了1个好方法。html,css,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具... [详细]
赞
踩
- 本篇文章通过代码示例，带大家介绍一下css3+javascript实现按钮水波纹效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css3,javascript,按钮水波纹,css,html,DevBox,在线流程... [详细]
赞
踩
- 使用css3中的“@keyframes”规则来定义动画。“@keyframes”规则用于指定动画规则，定义一个CSS动画的一个周期的行为，可以创建简单的动画；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。css3,@keyfr... [详细]
赞
踩
- 如何解决《Flexbox溢出不会扩展Chrome中的父容器》经验，为你挑选了0个好方法。html,css,overflow,css3,flexbox,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维... [详细]
赞
踩
- 如何解决《带有类的多行椭圆》经验，为你挑选了1个好方法。html,javascript,css,html5,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发... [详细]
赞
踩
- 判断方法：1、使用“@supports”规则判断，语法格式“@supports(属性:值){标签名称{属性:值}}”2、使用“CSS.supports()”函数判断，语法格式“CSS.supports("属性",&quo... [详细]
赞
踩
- 如何解决《Firefox:calc()无效的属性值》经验，为你挑选了1个好方法。css,firefox,css3,css-calc,chrome,https,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解... [详细]
赞
踩
- 如何解决《Webkit和jQuerydraggablejump》经验，为你挑选了6个好方法。javascript,jquery,webkit,css3,css,firefox,safari,chrome,firebug,html,DevBo... [详细]
赞
踩
- 如何解决《仅使用css(剪切)的多个透明圆圈》经验，为你挑选了2个好方法。html,css,svg,css3,css-shapes,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时... [详细]
赞
踩
- css3中调节透明度的方法：可以使用opacity属性来设置透明度，如【opacity:0.5;filter:Alpha(opacity50);】，表示将元素透明度设置为0.5。css3,透明度,css,html,DevBox,在线流程图,... [详细]
赞
踩
- 如何解决《如何使用CSS跨浏览器绘制垂直文本？》经验，为你挑选了7个好方法。html,css,cross-browser,css3,firefox,chrome,safari,webkit,go,https,hive,bootstrap,D... [详细]
赞
踩
- 如何解决《在div边界上填充》经验，为你挑选了2个好方法。css,css3,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,unix时间戳,在线开发工具,前端开发工具,开发人员... [详细]
赞
踩
- 如何解决《使元素具有CSS变换属性的响应能力》经验，为你挑选了1个好方法。html,javascript,css,jquery,css3,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,un... [详细]
赞
踩
- 如何解决《已修复的位置不适用于变换CSS属性》经验，为你挑选了1个好方法。css,css3,css-transforms,webkit,DevBox,在线流程图,编程,编程问答,程序员,开发者工具,开发工具,json解析,二维码生成,uni... [详细]
赞
踩
相关标签
