DIV下图片自适应解决方法

最新推荐文章于 2021-02-05 15:35:55 发布
原创 最新推荐文章于 2021-02-05 15:35:55 发布 · 567 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#div #border

本文介绍了一种利用CSS实现图片自适应的简单方法，通过设置max-width属性并结合表达式，使得图片能够在不同屏幕尺寸下自动调整大小。该方案避免了使用JS或仅通过外部容器overflow属性设置带来的局限。
作者：admin  来源：www.zhshji.cn  发布时间：2008-1-8 20:49:45

减小字体 增大字体

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>

 
纯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
html <div>标签内背景图片自适应div大小
m0_37828249的博客
10-29 10万+
只需通过css设置background-size属性为contain，即 background-size:contain 注意：一定要在先设置background之后再设置background-size属性，这样才有效
设置图片自适应DIV大小
weixin_30755709的博客
05-17 423
可以利用CSS样式表中表示后代的复合选择器进行设置。例： <head> <style type="text/css"> #right img /*设定box里所有图片的大小，自动调整缩放*/{ width:195px; height:162px;} </style> </head> <body> <div id="ri...
图片自适应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添加背景图片并让图片居中自适应大小
LuckFairyLuckBaby的博客
08-01 7833
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高度不确定时父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 ...
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 />上面的代码在使用的过
怎么让图片平铺 传进来的图片自适应这个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%; } ...
图片填满外层div 自适应不拉伸变形
ymumi的博客
06-19 3万+
#max-width:100%   相对于img本身的尺寸而言，最大的宽度为自身宽度 #width:100% 相对于父级宽度的 1.等比例缩小垂直居中：按宽度等比列缩放   或者可以选择按高度等比缩放 .photo-box{ display: table-cell; text-align: center; vertical-align: middle; ov...
背景图片适应div的大小
qq_32095903的博客
04-03 7733
对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片
怎么让div里面的图片自适应
Haines
05-21 5278
问题：轮播图div的宽度会随着屏幕的变大而变大，怎么让里面的图片自适应？ 设计稿轮播图尺寸是：1604*160 css: .swiper-container { width: 100%; max-height: 160px; .swiper-pagination{ .swiper-pagination-bullet{ width: 64px; height: 6px; background: #fff;
css背景图片填充样式background-size兼容ie8以下浏览器解决
☆╮123☆
08-05 8821
background-image: url(images/background.jpg); background-size:100%;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/background.jpg',sizingMethod='scale');/*兼容ie8以下*/ 已经试过，确实可用！！
css使引入的图像自动适应大小
kepengs的博客
09-12 3988
示例： .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...
纯CSS控制背景图片100%自适应填充布局
热门推荐
淘淘小窝
01-18 22万+
原文: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
【Web】HTML如何让IMG自动适应DIV容器大小
沙师弟专栏
05-22 16万+
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值