DIV下图片自适应解决方法

最新推荐文章于 2023-10-24 15:36:02 发布
最新推荐文章于 2023-10-24 15:36:02 发布
阅读量912 收藏
点赞数
分类专栏： 经典收藏 文章标签： div border go

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>

<script language="JavaScript" type="text/javascript">go('code_7643','vbs');</script>

 

百分比适应:

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

SDTerminator
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js解决div内图片自适应大小
01-23
纯js实现在img图片大小未知，div大小未知的情况下，让图片自适应大小,需要的朋友可以参考下 已测试，兼容火狐，谷歌，IE6，IE7/8
背景图片适应div的大小
qq_32095903的博客
04-03 7534
对背景图片设置属性：background-size：cover;可以实现背景图片适应div的大小。background-size有3个属性：auto：当使用该属性的时候，背景图片将保持100% 的大小显示，不进行任何缩放。超过div的多余部分将被隐藏。当图片过小时，图片会自动平铺。这种属性通常用来做重复性的背景或者做半透明图片背景。cover：当使用该属性时，图片将被缩放至恰好能覆盖div，并且图片
背景图全屏显示
weixin_30235225的博客
03-26 354
代码： background-size:cover；把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。background-position:center center 水平和垂直居中，变成手机版图片会居中显示 转载于:https://www.cnblogs.com/yuanyuan-1994/p/8653253.html...
图片自适应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大小
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设置背景图片自适应
qq_33745371的博客
02-05 1万+
div设置背景图片,不重复不变形，还可根据不同屏幕的宽度，自适应高度 效果： 宽度变窄，高度相应比例变窄 宽度变宽，高度相应比例变宽 高度与宽度无法直接自适应，需要找一个中间的属性相串联。 宽度的自适应是根据viewport的width来调整的。 padding padding是根据viewport的width来调整的。 padding-top和padding-bottom也是根据viewport的width来跳转的。 那么我们可以通过 padding-bottom属性来间接和width进行自适应。 p
子元素div高度不确定时父div高度如何自适应
01-19
Div即父容器不根据内容自适应高度，我们看下面的代码： 复制代码代码如下: <div id=”main”> <div id=”content”></div> </div> 当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好...
图片溢出div问题的快速解决方法推荐
12-13
前两天编写了一个前端页面，在本机上显示一切正常。不过在不断的测试中，发现了一个严重的问题，如果图片过大，会撑破div溢出来。再由于页面是自适应页面，...div图片溢出的解决方案</title>  <style ty
div不能自适应高度不能随图片的高度变化
01-19
在一个网页的栏目模块中，在一个<div>中有几个图片，但是div的高度是0，不能随图片的高度变化。 解决办法，<div>的overflow属性设置成auto 复制代码代码如下: <div class=”content” xss=removed> …</div>
DIV CSS：网页一行两列背景自适应
12-10
而在很多种情况下，设计师们常把左右两列的背景色设计成不同色彩，以实现内容块的明显区分；但这样的设计给布局提出了一个看似简单，而实现非常难的问题；那就是左右两列怎么样实现背景高度自适应，及左边内容高于...
css让图片自适应容器（div）大小,超便捷响应式图片自适应
weixin_30710457的博客
07-14 662
我们在写页面的时候经常会遇到需要图片自适应容器大小这样的情况，下面我就开门见山的说明一下怎样去实现这样一个效果。 1.简单的做法 1 2 3 4 5 <div> <img src="1.jpg" alt=""> </div> ...
css实现让图片在一个div中宽高自适应
最新发布
weixin_53755520的博客
10-24 477
起源在于object-fit:contain一直没有生效#
img与div容器自适应大小且不变形
qq_26889291的博客
01-28 931
img与div容器自适应大小且不变形
在div中图片img 替换时被拉伸
m0_58162502的博客
03-04 239
div 里的img图片替换被拉伸
css 图片大小自适应div,css让图片自适应容器（div）大小
weixin_34844709的博客
08-04 6700
咱们在写页面的时候常常会遇到须要图片自适应容器大小这样的状况，下面我就开门见山的说明一下怎样去实现这样一个效果。css 123备注一下这里的图片大小为200x200pxpromisediv {width:400px;height:400px;border:1px solid #000;}img {width:100%;height:100%;}123456789无论容器有多大，只...
css控制图片自适应大小
yongyafang123的博客
04-29 4万+
图片外层 用一个div包裹着 div { display: flex; justify-content: center; align-items: center; width: 定值; height: 定值; } img { width:auto; height:auto; ...
前端样式之div自适应，图片和盒阴影设置
weixin_41897122的博客
03-08 803
这篇就是对用的比较细小的css样式的总结和合并,常用又易忘的 作为背景,可以设置不重复布局,缩小比例50%,如果位置不满意可以用background-position调节位置,注意原点位置为图片的左上角,x轴向右为正值,y轴向下为正值 background: url(/static/image/test.png) 0 0 no-repeat; background-size: 50...
怎么让div里面的图片自适应
Haines
05-21 5154
问题：轮播图div的宽度会随着屏幕的变大而变大，怎么让里面的图片自适应？ 设计稿轮播图尺寸是：1604*160 css: .swiper-container { width: 100%; max-height: 160px; .swiper-pagination{ .swiper-pagination-bullet{ width: 64px; height: 6px; background: #fff;
【Web】HTML如何让IMG自动适应DIV容器大小
热门推荐
沙师弟专栏
05-22 15万+
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示。
div图片自适应div大小
05-24
要让图片自适应div的大小，可以使用CSS的`background-image`属性，将图片作为div的背景图像，并将`background-size`属性设置为`cover`或`contain`。 例如，如果你有一个div元素，你可以将其CSS代码设置为： ```css div { background-image: url('path/to/image.jpg'); background-size: cover; background-position: center center; } ``` 这将使图片充满整个div，同时保持其纵横比例不变。如果你想要图片适应div的大小，可以将`background-size`属性设置为`contain`，这将使图片尽可能大地适应div，同时保持其纵横比例不变。 ```css div { background-image: url('path/to/image.jpg'); background-size: contain; background-position: center center; } ``` 这些CSS代码将使图片自适应div的大小，并且可以在不同大小的屏幕上正确地呈现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值