[CSS]通过样式约束页面图片的长宽

最新推荐文章于 2022-01-04 15:05:55 发布
原创 最新推荐文章于 2022-01-04 15:05:55 发布 · 825 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #浏览器 #firefox #ie

本文介绍如何使用不同的CSS样式来确保不同浏览器下图片的长宽比保持一致。针对FireFox及IE7以上版本采用max-width属性，而针对IE6内核浏览器则使用特殊的expression方式。


通过样式约束页面图片的长宽比例


FireFox及IE7以上浏览器采用: max-width:600px;


IE6内核浏览器采用: width:expression(document.body.clientWidth>600?"600px":"auto")

 

 

flex4
关注
CSS实现图片按固定大小等比例缩放
12-23
CSS实现图片按固定大小等比例缩放，保证大图片按照 比例缩放到合适。
html&css笔记完整版
小旻
10-23 4743
把1,2合在一起了，方便查看 教程指路：这里 目录 1.导入 京东界面练习（p102-114） 设置网站图标（用在标题栏和收藏栏） 2.vscode使用 3.html 实体 meta标签： 语义化标签 块元素和行内元素 列表 超链接 路径： 图片标签 内联框架 音视频 表格table 表单form CSS 设置样式： 语法： 选择器： 单个选择器： 复合选择器： 父子兄弟选择器： 属性选择器 伪类选择器： 否定伪类： 超链接伪类： 伪元素选.
CSS控制图片的方法
sytm2014的专栏
09-05 783
CSS控制图片的方法 　　网页设计时，经常会遇到文章图片过宽，把页面撑变形的情况，除了手工剪裁之外，有没有更简单的方法呢?有，下面网上商城建设就提供基于CSS的三种控制方法： 　　第一种CSS控制样式： 　　#content img{width: 450px;height:450px;} 　　如果限制一个800*600的图片，那依然是显示为450*450，如果不确定全部都是正方形的
css 控制图片的横竖比例
352328759的博客
12-12 2873
大概你也遇到过"图片高度是宽度50%"这的需求 这需求看起来简单, 其实却非常麻烦 因为元素的宽高的百分比是相对于父元素的宽高计算的 所以直接设 width, height 是不符合预期的 .div { width: 100%; height: 50%; } 而且一个空 display: block 元素 height 的默认值是 0px; 如果父元素没设 height 的话, 该元素的 height 就是 0px 如果是位置比较浅的元素, 其实可以用 css3 的新单位 vw, vh 来实现 .i
CSS样式防止图片撑开固定样式
weixin_30466421的博客
12-23 277
.img{ /*防止图片过大撑开*/ max-width:600px;/* Other */ _width:expression((this.offsetWidth > 600) ? "600px" : this.offsetWidth+"px" );/* IE */ } 转载于:https://www.cnblogs.com/cndsn/archive/2010...
css过度约束
qq_44766166的博客
01-04 518
元素没有开启绝对定位 水平布局： margin-left + border-lef t+ padding-left + width + padding-right + border-right + margin-right =包含块的宽度 可设置auto的值： margin width 垂直方向布局也必须满足等式： margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom=包
uniapp uni-file-picker改变长宽且上传多个图片时换行自动填充出，防止遮挡
04-11
可能还需要处理图片的预览样式，比如设置图片的宽高为100%以适应容器，避免图片变形。同时，检查是否有官方CSS的限制，可能需要覆盖默认样式，比如引用[1]中的官方CSS，可能需要调整高度或溢出属性。 最后，确保...
uniapp uni-file-picker改变长宽且上传多个图片时可以滚动
04-11
最后通过CSS添加滚动样式。可能需要用户检查DOM结构，应用正确的类名来添加滚动。同时提醒用户注意平台差异，测试不同环境下的表现。在UniApp中使用$uni-file-picker$组件实现自定义宽高、多图上传和滚动支持，可...
fig长宽自适应
最新发布
06-27
2. **容器约束**：确保父容器有明确的尺寸（如设置CSS的`width:100%; height:400px;`） 3. **动态更新**：在窗口大小变化时调用 `Plotly.relayout()` 重新计算布局 4. **移动端适配**：添加视口元标签确保移动设备...
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 8156
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
CSS 控制DIV及图片的宽度和高度
eagleking012的专栏
08-19 235
在制作网页时，常常希望页面能够在窗口变小时出现滚动条，保持页面不变形；同时又想让页面随同窗口自动增长以填满窗口。 这时候我们需要设置长宽保留最小值，同时自适应。 如：background:url(header_bg.gif) #ffffff repeat-x 0 0; min-width: 760px; width: expression(document.body.clientWidth ...
html背景图设置距离,css怎么设置背景图片大小？
weixin_35712223的博客
06-25 884
我们现在经常会用到CSS，在编写过程中，会遇到CSS背景图像大小设置的问题，下面我们来看一下使用css设置背景图片大小的方法。css可以使用background-size属性设置背景图片大小，background-size属性规定背景图像的尺寸。语法：background-size: length|percentage|cover|contain;属性值：值描述length设置背景图像的高度和宽度...
设置Flex组件的尺寸大小
Inner peace
02-21 1357
[size=medium] [color=darkred][b]深红色部分标明了需注意的地方[/b][/color] 另外要注意组件和容器的生命周期，确保你设置width和height是正确的时候，否则你设置了可能不发挥作用，可参考文章:[url]http://help.adobe.com/en_US/flex/using/WS460ee381960520ad-2811830c121e91...
CSS控制图片的最大宽度
萌萌的It人 www.itmmd.com
05-21 1203
img class="photoresize" style="border:1px solid #ccc; padding:2px; margin:10px;" src="img")%>" /> style type="text/css"> .photoresize { max-width:600px; myimg:expression(onload=function()
Web网页尺寸(1)
qmister
10-07 8940
开发十年，就只剩下这套Java开发体系了 >>>    ...
HTML常用标签及约束
u013575896的博客
11-16 931
注释 <--!这是一段注释--> 样式表外部样式(CSS) <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式<head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>
CSS实现图片自适应布局
热门推荐
马骏超的博客
01-14 1万+
CSS实现图片自适应布局 最轻松的写法 &amp;lt;div class=&quot;container&quot;&amp;gt; // 这里图片尺寸为440X440像素， &amp;lt;img src=&quot;./images/medium.jpg&quot; alt=&quot;test&quot;&amp;gt; &amp;lt;/div&amp;gt; &amp;lt;sty
html 图片 保持长宽比,实现图片在页面中宽高一直保持16：9比例的方法
weixin_32144483的博客
06-04 3288
实现图片在页面中宽高一直保持16：9比例的方法发布时间：2020-08-31 14:25:10来源：亿速云阅读：133作者：小新小编给大家分享一下实现图片在页面中宽高一直保持16：9比例的方法，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！目标：遇到一个需求，让图片在页面中，不管宽度如何变化。宽高保持16：9的比例。实现：方法一：这也是比较经典的一个方法，利用padding-botto...
HTML <img> 标签的 height 和 width 属性
weixin_34329187的博客
01-29 1293
定义和用法 &lt;img&gt; 标签的 height 和 width 属性设置图像的尺寸。 提示：为图像指定 height 和 width 属性是一个好习惯。如果设置了这些属性，就可以在页面加载时为图像预留空间。如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。 提示：请不要通过 hei...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值