div下图片自适应解决方法
作者：remain 来自： 发布时间：06-10-21 浏览次数：24 [
大 中 小]
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过，希望通过此篇文章抛砖引玉，望更多高手指点。关键在于：max-width:780px;以及下面那行。
固定像素适应:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>780?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
百分比适应:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10?"780px":"auto");
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="/articleimg/2006/03/3297/koreaad_10020.jpg"alt="感谢blueidea被我盗链图片！"/>
</div>
</body>
</html>
1该方法不只是用于img;
2max-width,max-height,min-width,min-height.
Update:修正版
出处：
经典论坛<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>css2.0VSie</title>
<styletype="text/css">
<!--
body{
font-size:12px;
text-align:center;
margin:0px;
padding:0px;
}
#pic{
margin:0auto;
width:800px;
padding:0;
border:1pxsolid#333;
}
#picimg{
max-width:780px;
myimg:expression(onload=function(){
this.style.width=(document.body.clientWidth>780)?"780px":"auto"}
);
border:1pxdashed#000;
}
-->
</style>
</head>
<body>
<divid="pic">
<imgsrc="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG"alt="感谢blueidea被我盗链图片！"/></div>
</body>
</html>
分享到：
相关推荐
在网页设计中，让图片在div容器中自适应显示是一个常见的需求。这涉及到CSS样式、JavaScript以及浏览器兼容性的问题。本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示，并兼容不同浏览器...
一种常见的解决方法是利用JavaScript来实现图片自适应。通过动态计算元素的宽高比和图片的原始宽高比，我们可以调整图片的宽度或高度，保持其原始比例。以下是一个简单的JavaScript函数示例： ```javascript ...
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们...这个方法兼容了多种浏览器，包括较旧版本的IE，为开发者提供了跨平台的图片自适应解决方案。
这篇文章将详细介绍如何使背景图片自适应浏览器大小，并提供了两个解决方案。 一、背景图片自适应浏览器大小的重要性 在现在的响应式网页设计中，背景图片的自适应浏览器大小是一个非常重要的技术点。随着移动设备...
"jQuery图片自适应排列显示代码" 提供了一种解决方案，它利用了流行的JavaScript库jQuery以及一个名为"jquery.flex-images"的插件，来创建出类似谷歌图片流的效果。这种效果使得图片在不同尺寸的屏幕上都能以美观且...
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
要解决<div>不能随内部图片高度变化而自适应高度的问题，有几个方法可以尝试： 1. 使用overflow属性： 给<div>元素添加overflow:auto样式属性，可以让<div>根据内部内容自动调整高度。这种方法的优点是简单易行，...
开发者可以通过分析这些文件，学习如何编写适当的CSS规则，利用JavaScript库（如Bootstrap或jQuery）的插件，或者采用Web组件（Web Components）来创建自己的自适应表格解决方案。 总的来说，自适应表格设计是现代...
图片自适应大小的关键在于检测图片加载完成后的实际宽度和高度。jQuery提供`$(window).load()`或`$(document).ready()`函数来监听页面或图片加载事件。当图片加载完成后，可以通过`$(img).width()`和`$(img).height...
【jQuery图片自适应全屏幻灯片】是一个基于前端技术实现的动态展示图片的解决方案，主要运用了CSS、JavaScript、HTML5以及jQuery库。这个压缩包包含了一个完整的项目，用于创建一个能够根据屏幕尺寸自动调整大小，且...
在"基于bootstrap自适应的图片轮播预览.rar"这个压缩包中，我们主要关注的是Bootstrap的轮播（Carousel）插件，它是一个强大的图片轮播解决方案，尤其适合于图片预览功能。 Bootstrap Carousel 是一个全功能的滑动...
首先，我们需要理解图片自适应的基本原理。一般来说，有两种主要的策略：按比例缩放和裁剪。按比例缩放可以保持图片的原始比例，避免失真，但可能无法完全填充容器；而裁剪则可以填充整个容器，但可能会丢失部分图片...
【jQuery自适应窗口大小图片排列代码】是一种网页开发技术，旨在解决在不同设备和屏幕尺寸下，图片排列不整齐或显示不全的问题。这个技术利用了JavaScript库jQuery的强大功能，结合了名为`jquery.row-grid.js`的插件...
总之，要实现HTML中的背景图片自适应浏览器大小，可以利用CSS的`background-size`属性，或者通过创建一个绝对定位的div来实现。这些技术能够确保无论浏览器窗口如何缩放，背景图片都能保持合适的显示效果，为用户...
这种方法的代码简洁，但在背景是图片的情况下不适用，因为边框无法应用图像。 ```html <div id="box"> <div id="right">right right</div> <div id="left">left</div> <div style="clear:both"></div> </...
然而，这种方法在图片尺寸变化时可能无法自适应。为了解决这个问题，可以使用JS监听图片的`onload`事件，动态计算并设置剪切区域或背景定位。 此外，现代浏览器已经提供了更好的跨浏览器圆角解决方案，如使用`-...
综上所述，“自适应焦点图.zip”包含了一个完整的自适应焦点图解决方案，从HTML结构到CSS样式和JavaScript交互，为网页设计师和开发者提供了一种高效、美观且跨设备的图像展示方式。学习和理解这个案例可以帮助你更...
标题“CSS百分比padding制作图片自适应布局”所指出的核心概念是，当设置元素的`padding`为百分比值时，无论是`padding-top`、`padding-bottom`、`padding-left`还是`padding-right`，它们都是基于父元素宽度来计算...