`

div下图片自适应

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css2.0 VS ie</title>
<style type="text/css">
<!--
body {
 font-size: 12px;
 text-align: center;
 margin: 0px;
 padding: 0px;
}
#pic{
  margin:0 auto;
  width:800px;
  padding:0;
  border:1px solid #333;
  }
#pic img{
    max-width:780px;
 width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" );
 border:1px dashed #000;
 }
-->
</style>
</head>
<body>
<div id="pic">
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/>
</div>
</body>
</html>

 

分享到:
评论

相关推荐

    js解决div内图片自适应大小

    在网页设计中,让图片在div容器中自适应显示是一个常见的需求。这涉及到CSS样式、JavaScript以及浏览器兼容性的问题。本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示,并兼容不同浏览器...

    div背景全屏自适应

    ### div背景全屏自适应知识点解析 #### 一、知识点概述 在网页设计与开发过程中,经常需要将某个`div`元素的背景设置为全屏显示,并且能够根据不同的屏幕尺寸进行自适应调整。这种技术被称为“div背景全屏自适应”...

    div宽度自适应布局(左边自适应)

    在网页设计中,"div宽度自适应布局(左边自适应)"是一种常见的网页布局技术,它主要应用于响应式设计,使得页面在不同设备和屏幕尺寸下都能保持良好的视觉效果。这种布局方式强调左侧内容的宽度根据浏览器窗口大小...

    图片自适应兼容IE8完美就解决方案

    在网页设计中,图片自适应是一项重要的技术,它允许图片根据浏览器窗口的大小或设备的屏幕尺寸自动调整显示比例,确保用户体验的优化。对于IE8这样的老版本浏览器,由于其对现代CSS3属性的支持有限,实现图片自适应...

    纯js实现div内图片自适应大小(已测试,兼容火狐)

    在网页设计中,图片自适应大小是一个常见的需求,特别是在响应式布局中,为了确保不同设备和屏幕尺寸下的视觉效果,我们需要让图片能够根据其容器(如div)的大小自动调整。本文将详细介绍如何使用纯JavaScript实现...

    Jquery图片自适应大小并居中

    ### Jquery 图片自适应大小并居中 在前端开发中,经常遇到的一个问题是当页面中的图片尺寸不统一,特别是当图片的比例与显示区域的比例不匹配时,如何使得图片能够自适应显示区域,并且保持原有比例不变形。本文将...

    html图片自适应手机屏幕大小的css写法

    针对给定文件提供的内容,我们将详细探讨在HTML中使用CSS实现图片自适应手机屏幕大小的方法。以下内容将涵盖相关的知识点,包括CSS属性、选择器、以及与响应式设计相关的概念。 首先,我们注意到文件中提供了一段...

    子元素div高度不确定时父div高度如何自适应

    Div即父容器不根据内容自适应高度,我们看下面的代码: 复制代码代码如下: &lt;div id=”main”&gt; &lt;div id=”content”&gt;&lt;/div&gt; &lt;/div&gt; 当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好...

    HTML中使背景图片自适应浏览器大小.docx

    这篇文章将详细介绍如何使背景图片自适应浏览器大小,并提供了两个解决方案。 一、背景图片自适应浏览器大小的重要性 在现在的响应式网页设计中,背景图片的自适应浏览器大小是一个非常重要的技术点。随着移动设备...

    jQuery图片自适应排列显示代码.zip

    "jQuery图片自适应排列显示代码" 提供了一种解决方案,它利用了流行的JavaScript库jQuery以及一个名为"jquery.flex-images"的插件,来创建出类似谷歌图片流的效果。这种效果使得图片在不同尺寸的屏幕上都能以美观且...

    固定大小的div 自适应显示图片

    在CSS中,我们可以使用`max-width`和`height: auto`来实现图片自适应。这样设置图片的宽度最大不超过容器宽度,高度则会按比例自动调整: ```css img { max-width: 100%; height: auto; } ``` 这段代码确保图片...

    背景图片自适应浏览器分辨率大小并自动拉伸全屏代码

    需要注意的是,图片自适应和拉伸可能导致图片质量损失,特别是在屏幕分辨率较大时。此外,由于图片拉伸的不可预见性,可能需要对图片进行优化处理,比如使用适合的图片尺寸和分辨率,或者在拉伸过程中保持图片的宽高...

    div不能自适应高度不能随图片的高度变化

    要解决&lt;div&gt;不能随内部图片高度变化而自适应高度的问题,有几个方法可以尝试: 1. 使用overflow属性: 给&lt;div&gt;元素添加overflow:auto样式属性,可以让&lt;div&gt;根据内部内容自动调整高度。这种方法的优点是简单易行,...

    img图片自适应

    htm页面图片自适应,在各个浏览器兼容,并且兼容分辨率!

    jQuery自适应图片轮播代码_自适应图片切换代码

    例如,我们可以使用`&lt;div class="slider"&gt;`包裹所有的图片,并为每张图片设置类名为`slide`。在jQuery中,可以使用`$('.slide')`选择所有图片元素。 2. **事件处理**:轮播通常包含“自动播放”和“用户手动切换”...

    CSS控制图片自适应大小

    ### CSS控制图片自适应大小详解 #### 一、引言 在现代网页设计中,确保图片能够根据不同的屏幕尺寸和设备类型自适应显示是至关重要的。这种能力不仅可以提高用户体验,还可以帮助保持页面的整体布局和美观度不受...

    基于jquery的图片自适应

    用jquery写的一个图片自适应效果, 能向windows的图片缩略图那样在web上展示图片, 图片容器的尺寸可任意设置, 使用方法简单: &lt;div class="ImgWarp" src="images/2.jpg"&gt;&lt;/div&gt; 引用js,然后通过css设置容器宽高,...

    自适应图片切换

    10. **预加载**:插件可以控制图片的预加载策略,确保用户在切换到下一张图片时能够快速显示。 在实际应用中,开发者首先需要在HTML中设置滑动容器和图片列表,然后通过引入bxSlider的JavaScript和CSS文件,并调用...

    首页滚动图片自适应源码模板

    【首页滚动图片自适应源码模板】是一种网页设计中常见的元素,主要应用于网站首页,用于以动态滚动的方式展示多张图片,以增加视觉效果和用户体验。这种模板通常包含HTML、CSS和JavaScript三个主要部分,使得图片...

Global site tag (gtag.js) - Google Analytics