div中图片大小自适应

最新推荐文章于 2024-03-14 13:41:51 发布
最新推荐文章于 2024-03-14 13:41:51 发布
阅读量287 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/seospam/archive/2009/02/13/1390162.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> 婚纱摄影</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=""/>
</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>

转载于:https://www.cnblogs.com/seospam/archive/2009/02/13/1390162.html

weixin_34054931
关注
js解决div内图片自适应大小
01-23
纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下 已测试，兼容火狐，谷歌，IE6，IE7/8
纯js实现div内图片自适应大小(已测试，兼容火狐)
10-25
如果图片的宽高比大于或等于div的宽高比，我们需要根据较大的那个比例来调整图片大小，以保持图片的原始比例。反之，如果图片的宽高比小于div的宽高比，我们则根据较小的比例进行调整。在某些情况下，图片的宽高比...
div下图片自适应解决方法[转]
weixin_34054931的博客
03-29 295
我们（特别是像我一样的菜鸟）经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区，在论坛，可以这么说：哪儿需要上传图片，哪儿就存在这个问题，而论坛上也不时有人询问。为什么？原因很简单，我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。 以前的解决方法主要是利用js来实现，但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义...
HTML中 <div>标签内背景图片自适应div大小
Siona_xin 的博客
11-28 6941
只需通过css设置background-size属性为contain， 即background-size:contain 注意：一定要在先设置background之后再设置background-size属性，这样才有效
怎么让div里面的图片自适应
Haines
05-21 5214
问题：轮播图div的宽度会随着屏幕的变大而变大，怎么让里面的图片自适应？ 设计稿轮播图尺寸是：1604*160 css: .swiper-container { width: 100%; max-height: 160px; .swiper-pagination{ .swiper-pagination-bullet{ width: 64px; height: 6px; background: #fff;
div中插入图片_如何在Word中插入多张图片，并统一图片的大小，保持清晰度不变？...
weixin_39760206的博客
11-24 471
有时候需要在Word文档中，插入多张图，一张一张的插入，总会有这样的问题出现：图片的大小不一，只能一张一张去调整大小，不仅浪费了时间，还心累。那么有什么方法可以快速插入多张图还能统一图片的大小，并且保存图片的清晰度不变呢？有，这样的方法当然有，下面就跟着小编来看看吧。一、动图演示过程我们先来看看动图演示吧。二、详细操作步骤如果上面的动图演示太快，你看不过来的话，没事，这里详细的操作解说步骤。具体操...
jquery中加载图片自适应大小主要实现代码
10-26
从给定文件中提取的信息来看，知识点主要集中在如何使用jQuery实现图片在固定大小的div中自适应地显示。当图片尺寸小于div尺寸时，图片按实际大小显示；而当图片尺寸超过div尺寸时，图片自动缩放以适应div的大小。 ...
HTML中使背景图片自适应浏览器大小实例详解
08-30
总之，要实现HTML中的背景图片自适应浏览器大小，可以利用CSS的`background-size`属性，或者通过创建一个绝对定位的div来实现。这些技术能够确保无论浏览器窗口如何缩放，背景图片都能保持合适的显示效果，为用户...
div转png/jpg格式图片，兼容IE9+及主流浏览器
01-22
通过canvas2image，html2canvas，base64实现将div内容转成canvas，再转成png或者jpg格式的图片
如何在div中设置背景图片并且自适应div大小
weixin_43387852的博客
11-16 4万+
参考如下代码，设置背景图片的大小为100% 100%并且设置no-repeat 这样图片就能在div改变的情况下，仍然显示完全 <!DOCTYPE html> <html> <head> <style> #a { background-color: rgb(255, 208, 0); background-image: url("1.png"); backgrou
图片在div中自适应
最新发布
skylar的博客
03-14 380
外层div设置 relative 相对定位；内层img限制宽高不超出外层div，设置宽度为auto即可。解决图片过高的bug，主要限制高度。
img与div容器自适应大小且不变形
qq_26889291的博客
01-28 1790
img与div容器自适应大小且不变形
css 图片大小自适应div,css让图片自适应容器（div）大小
weixin_34844709的博客
08-04 6888
咱们在写页面的时候常常会遇到须要图片自适应容器大小这样的状况，下面我就开门见山的说明一下怎样去实现这样一个效果。css 123备注一下这里的图片大小为200x200pxpromisediv {width:400px;height:400px;border:1px solid #000;}img {width:100%;height:100%;}123456789无论容器有多大，只...
div设置背景图片自适应
qq_33745371的博客
02-05 1万+
div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度 效果： 宽度变窄，高度相应比例变窄 宽度变宽，高度相应比例变宽 高度与宽度无法直接自适应，需要找一个中间的属性相串联。 宽度的自适应是根据viewport的width来调整的。 padding padding是根据viewport的width来调整的。 padding-top和padding-bottom也是根据viewport的width来跳转的。 那么我们可以通过 padding-bottom属性来间接和width进行自适应。 p
html中怎么让img图片自适应div的大小
weixin_43112703的博客
02-26 2535
这样，图片就会根据父元素的大小进行自适应，保持宽高比例，而不会被拉伸变形。一、通过CSS技巧可以实现图片自适应<div>大小的效果。
css实现图片自适应容器的几种方式
hzxOnlineOk的博客
04-22 303
css实现图片自适应容器 经常有这样一个场景，需要让图片自适应容器的大小。 1、img标签的方式 我们马上就能想到，把width、height 设置为100%啊。来看一哈效果。 <div class='div1'> <img src="./peiqi.png" alt=""> </div> .div1 { width:500px...
div显示图片_图片标签
weixin_39627481的博客
11-29 1580
src：图片路径，本地资源，网络资源width：宽度heihgt：高度 如果单独设置了图片的高度或者宽度，则在图片保证不失真的情况下自动缩小或者放大title：图片标题，鼠标放在上面会显示alt：图片加载失败后的提示语 图片不会自动换行，是行内元素路径： 相对路径：从当前文件夹开始查找资源的路径 绝对路径：从根盘符处所查找的文件路径下面就是图片标签的代码<html> &l...
【Web】HTML如何让IMG自动适应DIV容器大小
热门推荐
沙师弟专栏
05-22 15万+
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示。
怎么让图片平铺 传进来的图片自适应这个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多张图片自适应div大小
05-24
可以使用CSS的flex布局来实现这个效果。 首先，将包含图片的div设置为flex容器： ``` .container { display: flex; } ``` 然后，给每个图片添加flex属性，使其在容器内均分空间： ``` .container img { flex: 1; } ``` 最后，将图片的宽度设置为100%以保证图片能够充满整个容器： ``` .container img { flex: 1; width: 100%; } ``` 完整的代码示例： ``` <div class="container"> <img src="image1.jpg" alt=""> <img src="image2.jpg" alt=""> <img src="image3.jpg" alt=""> </div> <style> .container { display: flex; } .container img { flex: 1; width: 100%; } </style> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值