DIV下图片自适应解决方法

最新推荐文章于 2021-02-05 15:35:55 发布
最新推荐文章于 2021-02-05 15:35:55 发布
阅读量541 收藏
点赞数
分类专栏： 建站技巧 文章标签： div border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexinye/article/details/2060804
版权
作者：admin  来源：www.zhshji.cn  发布时间：2008-1-8 20:49:45
<script language="javascript" type="text/javascript"> </script>

减小字体 增大字体

DIV下图片自适应解决方法

div下图片自适应解决方法

以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

 关键在于：max-width:780px;以及下面那行。

固定像素适应:

以下是引用片段：
<!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 > 780? "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>

百分比适应:

以下是引用片段：
<!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>

 
hexinye
关注
专栏目录
纯js实现div内图片自适应大小(已测试，兼容火狐)
10-25
在网页设计中，图片自适应大小是一个常见的需求，特别是在响应式布局中，为了确保不同设备和屏幕尺寸下的视觉效果，我们...这个方法兼容了多种浏览器，包括较旧版本的IE，为开发者提供了跨平台的图片自适应解决方案。
js解决div内图片自适应大小
01-23
在网页设计中，让图片在div容器中自适应显示是一个常见的需求。这涉及到CSS样式、JavaScript以及浏览器兼容性的问题。本文将深入探讨如何利用纯JavaScript实现img图片在大小未知的div内自适应显示，并兼容不同浏览器...
div设置背景图片自适应
qq_33745371的博客
02-05 1万+
div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度 效果： 宽度变窄，高度相应比例变窄 宽度变宽，高度相应比例变宽 高度与宽度无法直接自适应，需要找一个中间的属性相串联。 宽度的自适应是根据viewport的width来调整的。 padding padding是根据viewport的width来调整的。 padding-top和padding-bottom也是根据viewport的width来跳转的。 那么我们可以通过 padding-bottom属性来间接和width进行自适应。 p
纯CSS控制背景图片100%自适应填充布局
热门推荐
淘淘小窝
01-18 21万+
原文:http://www.uedsc.com/css-background-size-100.html 解决: html,body{height: 100%;width: 100%;margin:0;padding:0;} body{ background:url(bg-login.png)no-repeat; width:100%; height:100%; ba
设置图片自适应DIV大小
weixin_30755709的博客
05-17 387
可以利用CSS样式表中表示后代的复合选择器进行设置。例： <head> <style type="text/css"> #right img /*设定box里所有图片的大小，自动调整缩放*/{ width:195px; height:162px;} </style> </head> <body> <div id="ri...
div或img图片高度随宽度自适应
Rey
04-08 13万+
该方法主要用来做网站自适应的，同时可以实现撑起内容高度，避免图片加载后导致的页面滚动。一、可以使用js判断图片的宽度得到具体数值之后，再来利用js设置图片的高度（这里就不具体为大家细说了）。利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度，不能随着浏览器的窗口大小变化来实现自适应。二、我这次主要是用css来实现图片高度的自适应问题。下面是所需要的代码（这种方法是可以在图片上方垂直...
图片自适应div的大小
jance_zyx的博客
05-16 1万+
图片自适应div的大小。（刚出道的初级菜鸟，如果有大神，请指点指点） 一. 设置div大小和图片的大小同样相等 <div style="width:100px;height:100px;"> <img src="a.jpg" style="width:100px;height:100px;"> </div> 二.第二种其实就是和第一种差不多的形...
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
div不能自适应高度不能随图片的高度变化
09-25
要解决<div>不能随内部图片高度变化而自适应高度的问题，有几个方法可以尝试： 1. 使用overflow属性： 给<div>元素添加overflow:auto样式属性，可以让<div>根据内部内容自动调整高度。这种方法的优点是简单易行，...
图片自适应兼容IE8完美就解决方案
11-19
一种常见的解决方法是利用JavaScript来实现图片自适应。通过动态计算元素的宽高比和图片的原始宽高比，我们可以调整图片的宽度或高度，保持其原始比例。以下是一个简单的JavaScript函数示例： ```javascript ...
背景图片适应div的大小
qq_32095903的博客
04-03 7616
对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片
div添加背景图片并让图片居中自适应大小
LuckFairyLuckBaby的博客
08-01 7721
1.效果 2.实现 <div style="background-size: cover;-moz-background-size: cover;width: 100%;height: 171px;background: url('static/image/1.png') no-repeat center;"> </div> ...
图片填满外层div 自适应不拉伸变形
ymumi的博客
06-19 3万+
#max-width:100%   相对于img本身的尺寸而言，最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中：按宽度等比列缩放   或者可以选择按高度等比缩放 .photo-box{ display: table-cell; text-align: center; vertical-align: middle; ov...
css控制图片自适应大小
plutohusky的专栏
11-29 8万+
<br />相信大家做网页时经常会碰到大分辨率的图片会把表格涨破以致漂亮的网页面目全非，但只要使用以下的CSS语句即可解决。 <br />     该CSS的功能是：大于600的图片自动调整为600显示。<br /><style type="text/css"><br /><!--<br />img {width:expression(this.width>600?"600px":this.width+"px");}<br />}<br />--><br /></style><br />上面的代码在使用的过
css背景图片填充样式background-size兼容ie8以下浏览器解决
☆╮123☆
08-05 8761
background-image: url(images/background.jpg); background-size:100%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg',sizingMethod='scale');/*兼容ie8以下*/ 已经试过，确实可用！！
怎么让图片平铺 传进来的图片自适应这个div
若星汉灿烂
10-12 2万+
1.html <div id="bo"> <img src="imgs/1.jpg"> </div> css #bo{ display:inline-block; width:100%;/*图片自适应的父容器的宽*/ height:100%;/*图片自适应的父容器的高*/ } #bo img{ width:100%; height:100%; } ...
css使引入的图像自动适应大小
kepengs的博客
09-12 3935
示例： .logo { float: left; background: url(../../images/res/out.png) no-repeat; height: 46px; width: 46px; background-size: 100% 100% ; text-indent: -9999em; margin-top: 10...
div的Img图片自适应容器的大小
java_xxxx的博客
08-02 3万+
废话不多说，让imd图片自适应大小，网上东拼西凑得到了两套方案，且都能实行 方案一：只要设置了父容器的大小，那么img就会自适应大小 &lt;img src="../../libs/images/login.jpg" style=" width: 100%; height...
css实现图片自适应容器的几种方式
weixin_33701251的博客
02-25 9472
css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。 &lt;div class='div1'&gt; &lt;img src="./peiqi.png" alt=""&gt; &lt;/div&gt; .d...
自适应页面下图片溢出div的解决方案
本文主要讨论了前端开发中遇到的图片溢出`<div>`的问题，尤其是在自适应页面设计中，由于图片尺寸可能随着屏幕分辨率的变化而超出其父级容器。作者通过一个示例代码展示了初始问题，其中一张图片在某些分辨率下会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值