div下图片自适应大小

最新推荐文章于 2024-05-15 09:36:56 发布
最新推荐文章于 2024-05-15 09:36:56 发布
阅读量1.4k 收藏
点赞数
分类专栏： javascript 文章标签： div function image border url 脚本
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gkq8124372/article/details/7381379
版权

div下图片自适应大小

结合脚本与CSS完成的.对所有的图片都有效.

<SCRIPT LANGUAGE="JavaScript">
function imgSize(url ,id) {
var imgObj = new Image();
var imgDiv=document.getElementById(id)
imgObj.src = url;
imgDiv.innerHTML= imgObj.width + " × " + imgObj.height;
}

function changeSize(obj, width) {
if (obj.width > width) {
obj.width=width;
}
}
</SCRIPT>
<div style="width: 500px;">
<IMG src="test.jpg" border="0" οnlοad="changeSize(this, 750);">
</div>


可以仿照如下格式使用这段代码。其它的代码都不是很有效。这个比较有效的了。

<head>

<SCRIPT LANGUAGE="JavaScript">
function imgSize(url ,id) {
var imgObj = new Image();
var imgDiv=document.getElementById(id)
imgObj.src = url;
imgDiv.innerHTML= imgObj.width + " × " + imgObj.height;
}

function changeSize(obj, width) {
if (obj.width > width) {
obj.width=width;
}
}
</SCRIPT>


<style type="text/css">
<!--
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
#pic{
    margin:0 auto;
    width:100%;
    padding:0;
 
    }
#pic img{
     max-width:758px;
      myimg:expression(
οnlοad=changeSize(this, 758)

             );

}

-->
</style>
</head>

<body>

<div id="pic"><%=rs("content")%></div>

</body>

 

G球
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css让图片自适应容器（div）大小并居中显示
小柠檬爱编程
05-12 3669
我们在写页面的时候经常会遇到需要图片 自适应 容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。(因为此图片表示很难过…哎); <div> <img src="1.jpg" alt=""> </div> div { width: 400px; height: 400px;//对于图片的多变性,很多情况下不给固定高,让图片自适应,避免图片变形失真 border-radius: 5px; display:
Div 自适应屏幕大小
热门推荐
wodetiankong516的博客
08-03 4万+
Background       有时， 我们需要将div或者其他的Element 自适应屏幕，窗口以及浏览器 , 这样会提高页面美观，提升用户体验， 只是个小问题，但是它用到的知识 还是可以吸收一下。   Knowledge prepared       这里准备下我们所要了解的一些size属性，有助于我们设置自己需要的大小。 description att
css实现图片自适应容器的几种方式_css&lt；img&gt；大小自适应
最新发布
2401_84715691的博客
05-15 1021
这种图片比容器小的情况强行将图片自适应的话图片就失真。但经常会遇到接口获取的不规则图片的情况，一般这种时候会将小于容器的话将其水平、垂直居中。属性就能进一步优化图片的宽高都小于容器的情况了。max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。这是正常的佩琪（如果图片比容器大的话，图片会超出容器）
div宽度自适应
04-23 1618
实现效果：3个水平div 两旁div宽度固定 中间自适应 做法：1.将3个div仍在一个div(父元素)里面,父元素width:100% 且父元素的padding-left 和padding-right: 值等于3个子div中需要固定宽度的div 的宽度             2.
div高度自适应（或者大小自适应）
dianmi9782的博客
06-24 445
　　<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现（摘自W3C school）。在编写页面的时候（这里是指jsp），有遇到div标签不能随着内部的内容扩充本身大小的情况，借助div标签的height和overflow属性，可以完美解决问题。 一 布局的时候设定了div的宽度和高度，但高度不够 ...
纯js实现div内图片自适应大小(已测试，兼容火狐)
10-25
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们需要让图片能够根据其容器（如div）的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...
js解决div内图片自适应大小
01-23
本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示，并兼容不同浏览器，包括火狐、谷歌和IE6/7/8。 首先，我们来看一下基本的HTML结构，它包含一个div容器和一个img元素： ```html <div ...
JQuery加载图片自适应固定大小的DIV
10-26
在固定大小的div中放置一个图片，当图片较小时显示实际大小，当图片超过div大小时图片 自动适应div 的大小，实现思路如下，感兴趣的朋友可以了解下
图片根据容器大小自适应
weixin_30237719的博客
11-22 548
经常会遇到这种需求，就是根据图片的最长边缘来等比自适应，通过纯css可以很简单的使图片不变形显示。 应用场景 例如有长大于宽的 也有宽大于长的当然也有长等于宽的，但是需求是不知道图片的长和宽哪个长，那么就需要在不管图片的长和宽哪个长哪个短，在容器中都能自适应保持等比放大或缩小如图： 长大于宽的图 宽大于长的图 长等于宽的图 实现代码 可以看不管图片是什么比例的宽度，都可以自适应不变...
CSS图片自适应容器大小
lllljz的专栏
03-23 839
img{ max-width:150px; width:150px; width:expression(document.body.clientWidth>150?"150px":"auto"); overflow:hidden;} 150指的是你需要的宽度，一般为容器宽度即可。
div等元素位置自适应屏幕大小
small_33的博客
05-28 5291
珊妹今天给大家分享的是前端最低级且实用的技术，大家不论是开发还是面试都会经常碰见的问题的解决办法： #.我们开发时候，如果创建个div,可能会想让它适应任何屏幕大小，因为我们访问时候的电脑或手机尺寸大小不一，本来在我们开发的机器上美观的很，有时候我们的网站就会变得错综复杂，一盘散沙，下面就来提供几种方法： 1.获取屏幕窗口高度-其它元素高度: var h = $(window).height()-$("#header").outerHeight(true); $("#div").css("heig.
div自适应高度
SimpleLife
06-28 5200
页面中，有两个div，div分别需要自适应浏览器高度。 代码如下，是使用了css3的自适应属性来实现的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style>...
div自适应宽度方法
xiao1215fei的专栏
09-24 807
若想外层div框自适应宽度，则需设置该div的position为
css实现图片自适应容器的几种方式
u010227042的博客
11-10 901
css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。 <div class='div1'> <img src="./peiqi.png" alt=""> </div> .div1 { width:500px; height:400px; border:1px solid black; } .div
html div自适应布局,css两个div自适应宽度布局方法大全（精华）
weixin_33920303的博客
06-15 2502
第一种方法：BFC块级格式化上下文-----左边固定宽度---------------------------------------------右边自适应宽度----------------------------------------.container1{ width:100%; height:100px; border:1px solid red;}.left1{ float:left;...
innerHTML内嵌文字图片
远行的博客
09-19 2923
经常遇到这种需求（策划特别喜欢），一行文字中间需要嵌入图片，但是这行包括图片的文字又需要根据文字长度或者图片宽度自适应居中。 比较原始的方法是每种情况都放进去试下，量坐标，然后写if条件进行判断，不同条件设置不同的坐标实现居中。 后来发现LAYA提供的HTMLDivElement支持同时包含文字和图片，引擎在渲染时，如果是文字，则会用HTMLElement进行渲染，如果是图片，则会用HTMLI...
css图片自适应div大小
u011394115的专栏
12-04 689
filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";       -moz-background-size:100% 100%;       background-size:100% 100%;
从DIV中读取所有的IMG图片并设置图片大小
02-23 1834
function  imgSize(strWidth,strHeight){               var img;               img = $("#strImg img");     --jquery , div的id 为strImg             for(var i=0; i                  image = img[i];
div图片自适应div大小
05-24
要让图片自适应div的大小，可以使用CSS的`background-image`属性，将图片作为div的背景图像，并将`background-size`属性设置为`cover`或`contain`。 例如，如果你有一个div元素，你可以将其CSS代码设置为： ```css div { background-image: url('path/to/image.jpg'); background-size: cover; background-position: center center; } ``` 这将使图片充满整个div，同时保持其纵横比例不变。如果你想要图片适应div的大小，可以将`background-size`属性设置为`contain`，这将使图片尽可能大地适应div，同时保持其纵横比例不变。 ```css div { background-image: url('path/to/image.jpg'); background-size: contain; background-position: center center; } ``` 这些CSS代码将使图片自适应div的大小，并且可以在不同大小的屏幕上正确地呈现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值