`
wanganlin21
  • 浏览: 4577 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

用JS、CSS控制图片最大宽度

 
阅读更多
<img src="img.jpg" onload="javascript:if(this.width>300)this.width=300">

这句代码能把超过300宽度的图片变为300宽,  小于300的图片保持原尺寸不变。
很实用。
还可以把js写到css里面
img{
max-width: 300px;/*IE7 FF 支持*/
width:expression(this.width > 300? "300px":this.width );/* sets max-width for IE  为IE设置最宽值*/
}
分享到:
评论

相关推荐

    div+css布局限制图片最大宽度图片水平垂直居中兼容IE6

    总结起来,要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”,我们需要结合使用`max-width`属性限制图片宽度,通过`text-align`和内联块级元素实现水平居中,以及利用`vertical-align`和负`margin`...

    css 图片自适应宽度 CSS实现控制图片自适应显示宽度代码

    总结来说,CSS的`max-width`属性是控制图片自适应宽度的标准方法,适用于大部分现代浏览器。对于不支持`max-width`的旧版IE(尤其是IE6),可以通过`expression`属性来实现类似效果。不过,随着浏览器更新迭代,如今...

    js+css实现背景图片自适应宽度导航代码

    "js+css实现背景图片自适应宽度导航代码"的主题旨在教你如何利用JavaScript(js)和层叠样式表(css)来创建一个背景图片能根据导航文字宽度自适应的导航条,同时模仿苹果产品的导航条效果。以下将详细介绍这一技术...

    jquery自动图片最大宽度

    jQuery是一个广泛使用的JavaScript库,它提供了丰富的API和方法,使得处理DOM元素、事件绑定以及动画效果变得简单易行。在这个场景下,我们可以通过jQuery来动态调整图片的宽度,使其不超过容器的最大宽度,从而保持...

    JS+css 图片自动缩放自适应大小

    我加了css的限制: 代码如下:div img {}{max-width:600px;width:600px;width:[removed]document.body.clientWidth&gt;600?”600px”:”auto”);overflow:hidden;}◎ max-width:600px;... 超出的部分隐藏,避免控制图片大

    css最大宽度 css控制图片的最大宽度及expression学习

    本文将重点介绍如何通过CSS控制图片的最大宽度,并简要学习CSS中的expression函数,尽管后者是一个已被废弃的属性,但了解它有助于理解浏览器的兼容性处理。 首先,让我们关注CSS中图片的最大宽度控制。在实际的...

    CSS控制图片自适应大小

    ### CSS控制图片自适应大小详解 ...综上所述,使用CSS控制图片自适应大小是一项实用且重要的技能。通过上述方法,我们可以有效地管理和优化网页中的图片展示,从而提升用户体验并保持页面的一致性和美观度。

    科讯CMS纯CSS控制图片最大宽度

    关键字描述:最大 图片 控制 &nbsp 这个 var // 宽度 maxwidth if科汛CMS官方模板中自带了一段JS用来控制文章中的图片的最大高度和宽度。不过我也很奇怪,为什么这个js有时候好用有时候并不好用,这个问题我研究了很...

    jquery css3按钮控制图片螺纹旋转切换特效

    总结起来,"jquery css3按钮控制图片螺纹旋转切换特效"是一个结合了jQuery动态控制和CSS3视觉效果的项目。通过合理利用这两个技术,我们可以创建出具有独特视觉效果的图片展示方式,这不仅提升了网页的吸引力,还...

    CSS控制图片大小-适应宽度

    CSS控制图片宽度适应性的问题在于,如果我们简单地为图片设置一个固定的宽度值(如`width: 500px;`),可能会导致宽度小于这个值的图片被不必要地放大,而宽度大于这个值的图片则正常显示。这种简单的设置不考虑图片...

    css+js图片水平滚动带控制按钮

    这个"css+js图片水平滚动带控制按钮"的资源正提供了这样的功能,它结合了CSS样式和JavaScript脚本,为网页开发初学者提供了一个实用的解决方案。 首先,我们来看CSS在其中的作用。CSS(Cascading Style Sheets)是...

    根据图片大小自适应的CSS

    - **考虑使用CSS Flexbox或Grid布局**:这些现代布局技术可以更灵活地控制图片和其他元素的位置和大小,尤其是在复杂的页面布局中。 - **使用srcset属性**:在HTML中使用`&lt;img&gt;`标签的`srcset`属性,可以提供多个...

    12种炫酷CSS3图片切换过渡效果

    `transform: rotate()`属性可以控制图片的旋转角度,结合`transition`,可以制作出旋转过渡效果。 5. **3D翻转**:CSS3的`transform: perspective()`和`rotateX`、`rotateY`属性可以实现3D翻转效果,让图片仿佛在...

    JS CSS3图片层叠缩放代码.zip

    在本资源"JS CSS3图片层叠缩放代码.zip"中,主要包含了一种利用JavaScript (JS) 和CSS3技术实现的图片交互效果,特别是针对鼠标悬停时的图片层叠缩放展示。这种效果常见于图片相册或产品展示等应用场景,能够提升...

    背景自适应文字宽度的css按钮

    在这里,我们可以将其设为“auto”,让背景图片宽度自动匹配元素宽度。`background-repeat`应设置为“no-repeat”,以防止背景图片在水平方向重复。 以下是一个基本的CSS代码示例: ```css .btn { display: ...

    CSS + Js实现图片水平滚动

    3. **绝对定位(Absolute Positioning)**:如果需要更精确地控制图片的位置,可以使用绝对定位。配合`left`或`right`属性,可以改变元素的水平位置。 4. **动画(Animation)**:`@keyframes`规则定义了动画从开始...

    w3c JS CSS DIV图片切换

    在这个项目中,我们可以使用多个`&lt;div&gt;`来分别包裹每张图片,然后用CSS和JS来控制它们的显示和隐藏,从而实现图片的切换。 实现这个功能的步骤可能包括: 1. **HTML结构**:创建一个包含所有图片的容器`&lt;div&gt;`,每...

    CSS限制图片大小

    值得注意的是,使用`expression`属性来动态设置图片宽度的方法在现代Web开发中并不推荐,因为它只适用于Internet Explorer浏览器,并且可能引发性能问题。在现代浏览器中,更推荐使用纯CSS的方式来实现类似的功能,...

    js+css 图片列表自适应

    在网页设计中,"js+css图片列表自适应"是一个重要的技术点,它涉及到JavaScript和CSS两种核心技术,用于实现图片列表在不同设备和屏幕尺寸下的良好显示效果。这个主题主要包含以下几个方面: 1. **响应式设计**:...

Global site tag (gtag.js) - Google Analytics