图片自动适应大小

最新推荐文章于 2020-12-12 17:18:31 发布
最新推荐文章于 2020-12-12 17:18:31 发布
阅读量1.1k 收藏
点赞数
分类专栏： Javascript 文章标签： javascript border float html css

方法一[javascript]：

οnlοad="javascript:if(this.width>450)this.style.width=450;"

οnlοad="javascript:if(this.width>450)this.style.width=450;else this.style.width=200"

οnlοad="javascript:if(this.width>450)this.style.width=450;if(this.width<200)this.style.width=200;"


下面的代码将相应鼠标点击事件，以新窗口打开当前图片：

onClick="javascript:window.open(this.href,'','');return false;"

***************************************************************************

方法二[CSS]：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片自动适应大小</title>
<style type="text/css">
<!--
body {
 font-size: 12px;
 text-align: center;
 margin: 0px;
 padding: 100px;
 width:800px
}
#text{
padding:10px;
margin:0px;
float:left;
width:456px;
border:1px dashed #000;
height:203px;
line-height:20px;
}
#fixwidth{
  width:790px;
  border:1px solid #333;
  }
#fixwidth img{
 float:right;
    margin:0px;
    max-width:300px;
 width:expression(document.body.clientWidth > 780?"300px": "auto" );
 border:1px dashed #000;
 }
-->
</style>
</head>
<body>
<h1>图片自动适应大小</h1>

<div id="fixwidth">
<div id="text">
这是图片自动适应大小，试着改动<br />
</div>
<img src="http://news.xinhuanet.com/photo/2006-03/29/xinsrc_02203032921351711407105.jpg">
</div>
</body>
</html>

 
fableking
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
word表格图片自动适应表格大小_几招教你快速解决word文字、图片、表格排版问题，你肯定遇到过...
weixin_39959569的博客
12-12 6119
在word日常办公中，很多小伙伴是不是总会遇到文字、图片及表格排版的某些问题呢？今天我们来分享一些在办公中经常会遇到几个常见问题的解决方法。1.写文档的时候出现“吃字”现象。在word写文档的时候，你有没遇到过，当你想修改一段话里的几个字的时候，后面的字就会被“吃掉”，你输入几个就“吃掉”几个字。那是因为你删除文字的时候不小心按到了删除键旁边的Ins键，这个键的功能就是开启覆盖模式，你打几个字就覆...
图片自适应Picture控件大小
l_s_j_d_q_j的专栏
07-10 2573
该代码放在void C***Dlg::OnPaint()函数else块 CRect rect; PictureBox.GetClientRect(&rect); //m_picture为Picture Control控件变量，获得控件的区域对象 CImage image; //使用图片类 image.Lo
图片自动适应表格的大小
qq_40761693的博客
09-06 6719
给表格设置背景图片的时候，总会遇到图片不适应表格大小的问题。 今天不小心发现了一个很简单的方法嘿嘿嘿~ 下面实现的效果是：整体表格图片自适应和单元格图片自适应。 <html> <head> <title>图片自动适应</title> <style> </style> </he...
word表格图片自动适应表格大小_Excel图片嵌入单元格，拖动表格图片会自适应单元格大小...
weixin_39639505的博客
12-12 1万+
我们经常会在Excel中插入一些图片，例如：产品图片、人物照片等等。而插入这些图片的同时，建议大家可以将图片固定在单元格中。后期如果我们再调整表格大小，图片也能够自适应单元格大小而变化。效果演示无论我怎么调整表格大小，图片都会跟着自适应变化，能为我们省去不少麻烦。设置方法1、首先，我们插入图片，然后调整到合适的大小，再调整一下单元格大小。2、将单元格与图片大小调整到一致大小，那可不是一件...
excel插入图片自动适应表格大小
热门推荐
christne1225i的专栏
07-27 2万+
1  ALT + F11 2 菜单 插入-----模块 3 键入 Sub PictureFitUnit()     Dim sh As Shape     For Each sh In ActiveSheet.Shapes         sh.LockAspectRatio = False         sh.Left = sh.TopLeftCell.Left    
让图片自动适应框的大小
04-03 2068
NSString *imagePath = [[NSBundlemainBundle] pathForResource:@”test” ofType:@”png”]; UIImage *image =[[UIImage alloc]initWithContentsOfFile:imagePath]; UIImage *newImage = [imagetransformWidth:80.0f
js实现图片的大小自适应效果
anchuan0625的博客
12-29 1006
需求是传过来一个图片，根据外层div的大小自动进行缩放效果。 function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示图片相对窗口的缩放比例 var imgW, imgH; var centerW = $(window).width() - $("#alarmQueu...
js 加载时自动调整图片大小
10-30
JavaScript 自动调整图片大小技术详解 在web开发中，图片的尺寸调整是非常常见的一种需求，特别是在移动端或响应式设计中。今天，我们将探讨JavaScript自动调整图片大小的技术，通过分析给定的源代码，了解该技术的...
基于jQuery的图片大小自动适应实现代码
10-28
这段代码会找到所有类名为`jq-img-autoresize`的元素，并为其应用图片自动适应的功能，同时定义了加载和错误状态的显示文本。 最后，该实现提供了完整的源代码和演示地址，方便开发者查看和下载。这是一个实用且...
背景图片自动调整大小
01-14
### 背景图片自动调整大小技术解析 #### 技术背景与应用场景 在Web开发领域，背景图片的处理是一项非常重要的技术。特别是在早期的浏览器兼容性问题中，如何让背景图片随着页面或者容器的大小变化而自动调整，成为...
gridcontrol显示图片，并自动适应行高，无图片时高度固定，有图片自动适应
08-18
gridcontrol显示图片，并自动适应行高，无图片时高度固定，有图片自动适应，例如：固定行高50，图片列宽度为100，插入一个200*300的图片，在列中只会显示100*150，行高为150，无图片列行高为50
JS+css 图片自动缩放自适应大小
10-27
根据给定的文件内容，以下知识点详细解释了图片自动缩放自适应大小的相关技术实现： 1. **图片自适应容器大小** - 在文档中提到了使用CSS的`max-width`属性来限制图片的最大宽度，该属性在多数现代浏览器（如IE7及...
如何在表格中自动调整图片显示尺寸
cation的专栏
04-09 3970
其实，你可以使用javascript来设置的哦，也不难。;;var thumb_Max_Width=100;var thumb_Max_Height=100;var thumb_scale=1;/*document.all.thumb_1.width=var thumb_Max_Width;*/ if (document.all.thumb_1.height>thumb
如何使图片尺寸自动适应窗口，随窗口大小变化而变化
喜欢海
01-15 2万+
代码如下： <img src="{{ url_for('static', filename=picture.piclink) }}" alt="" style="width: 100%; height: 100%">
外部js失效的解决的方法
qq_45064049的博客
06-05 4521
外部js失效的解决的方法1. 外部js失效的原因:2. 解决方案一:在body的后面引入外部js3. 解决方案二:将所有的js代码放到window.οnlοad=function(){}里面 1. 外部js失效的原因: 最主要的原因就是我们忽略了一个html代码的执行的顺序,从上到下,从左到右. 平常我们引入一个外部的js代码,通常会把它放到head的最后面.这样就会导致,代码从上到下执行的时候,...
HTML5画布（图像）
weixin_30700099的博客
04-15 110
案例1： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var c=document.g...
前序2 前端要学习的基础
Emily_lhj的博客
01-15 342
WEB前端开发工程师要学的基础 1）软件:        浏览器（常见的有谷歌、IE浏览器、火狐浏览器，前端开发常用的是谷歌和火狐，ie仅在要求兼容ie浏览器时测试用。）        浏览器插件：谷歌下是F12，火狐下要装firebug插件。使用方法都是按f12或右键-审查元素/检查        用来写代码的编辑器：记事本、DreamWeaver、Sublime        Pho
javascript dom中的Image对象——图像预加载
uop_hai的博客
02-09 225
在做一些tips效果，或者是一些图片浏览效果时，图片开始是隐藏的，当用户进行一定的操作时，图片会根据需要显示出来。但图片文件都相对比较大，如果一下子都显示出来，很耗时间和流量，如果都不显示，等触发一定事件时再加载，用户体验又不太好，增加用户的等待时间。 权 衡一下利弊，可以有选择的利用JavaScript预加载一些需要的图片，先将其装入DOM，等到需要的时候，直接调用，省掉等待的时间，...
css设置图片自动适应屏幕大小
最新发布
01-21
以下是两种CSS设置图片自动适应屏幕大小的方法： 1. 使用background-size属性 ```css .background-image { background-image: url("image.jpg"); background-size: cover; background-position: center; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值