首页 web前端 js教程 JS+css 图片自动缩放自适应大小_javascript技巧

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

May 16, 2016 pm 05:26 PM
图片 大小 缩放

我加了css的限制:

复制代码 代码如下:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
 ◎ width:600px; 在所有浏览器中图片的大小为600px;
 ◎ 当图片大小大于600px,自动缩小为600px。在IE6中有效。
 ◎ overflow:hidden; 超出的部分隐藏,避免控制图片大小失败而引起的撑开变形。
在放图片的页面里加了
复制代码 代码如下:



单独的图片控制,用这个:
复制代码 代码如下:

<script><BR>var abc=document.getElementById("abc");<BR>var imgs=abc.getElementsByTagName("img");<BR>for (var i=0,g;g=imgs[i];i++)<BR>g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}<BR></script>

测试在IE和FF下通过。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? 小红书发布自动保存图片怎么解决?发布自动保存图片在哪里? Mar 22, 2024 am 08:06 AM

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

抖音评论里怎么发图片?评论区图片入口在哪里? 抖音评论里怎么发图片?评论区图片入口在哪里? Mar 21, 2024 pm 09:12 PM

随着抖音短视频的火爆,用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片,以更好地表达自己的观点或情感。那么,抖音评论里怎么发图片呢?本文将为你详细解答这个问题,并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片?1.打开抖音:首先,你需要打开抖音APP,并登录你的账号。2.找到评论区:在浏览或发布短视频时,找到想要评论的地方,点击“评论”按钮。3.输入评论内容:在评论区输入你的评论内容。4.选择发送图片:在输入评论内容的界面,你会看到一个“图片”按钮或者“+”号按钮,点

在 iPhone 上使图片更清晰的 6 种方法 在 iPhone 上使图片更清晰的 6 种方法 Mar 04, 2024 pm 06:25 PM

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时,您可能会遇到一些问题,这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步,可以让您快速拍照,但相机在某些情况下可能会错误地对焦错误的拍摄对象,从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度,以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

ppt怎么让图片一张一张出来 ppt怎么让图片一张一张出来 Mar 25, 2024 pm 04:00 PM

在PowerPoint中,让图片逐一显示是一种常用的技巧,可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤,包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外,还提供了高级设置和调整,例如使用触发器、调整动画速度和顺序,以及预览动画效果。通过遵循这些步骤和技巧,用户可以轻松地在PowerPoint中设置图片逐一出现,从而提升演示文稿的视觉效果并吸引观众的注意力。

iPhone上的Safari缩小问题:这是修复程序 iPhone上的Safari缩小问题:这是修复程序 Apr 20, 2024 am 08:08 AM

如果您无法控制Safari中的缩放级别,完成工作可能会非常棘手。因此,如果Safari看起来被缩小了,那对您来说可能会有问题。您可以通过以下几种方法解决Safari中的这个缩小小问题。1.光标放大:在Safari菜单栏中选择“显示”>“放大光标”。这将使光标在屏幕上更加显眼,从而更容易控制。2.移动鼠标:这可能听起来很简单,但有时只需将鼠标移动到屏幕上的另一个位置,可能会自动恢复正常大小。3.使用键盘快捷键修复1–重置缩放级别您可以直接从Safari浏览器控制缩放级别。步骤1–当您在Safari

word缩放页面并排怎么操作 word缩放页面并排怎么操作 Mar 19, 2024 pm 07:19 PM

我们在使用word文档进行文件编辑的时候,有时候页面较多,我们想并排显示并整体查看效果如何,但是苦于不会操作,经常需要拉动好久逐页查看。不知道你有没有遇到过类似的情况,其实这时候我们只要学会word缩放页面并排的设置方法就可以轻松解决。下边,我们就一起看一看,学一学吧。首先,我们在Word文档中创建并打开一个新的页面,然后输入一些简单的内容,以便更容易区分。2、比如我们要实现word缩放并排显示,我们需要找到菜单栏【视图】,之后,在视图工具选项中选择【多页】,如下图所示:3、找到【多页】并点击,

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 如何使用HTML、CSS和jQuery实现图片合并展示的高级功能 Oct 27, 2023 pm 04:36 PM

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中,图片展示是一个重要的环节,而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能,并提供具体的代码示例。一、HTML布局:首先,我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 福昕PDF阅读器如何将pdf文档转成jpg图片-福昕PDF阅读器将pdf文档转成jpg图片的方法 Mar 04, 2024 pm 05:49 PM

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法,感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器,接着在顶部工具栏找到“特色功能”,然后选择“PDF转其他”功能。在接下来,打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录,然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来,添加完毕后点击“开始转

See all articles