当前位置：主页 > 查看内容

HTML如何让IMG自动适应DIV容器大小的实现方法

发布时间：2021-04-30 00:00| 有 位朋友查看

简介：为了让IMG自适应大小，如下我做了一个横向自适应的示例： IMG样式（横向拉伸，纵向自动匹配大小） DIV样式（元素居中显示） IMG样式 （横向拉伸，纵向自动匹配大小） width:100%; height:auto; （纵向拉伸，横向自动匹配大小） width:auto; height:100%; DIV……

为了让IMG自适应大小，如下我做了一个横向自适应的示例：

  • IMG样式（横向拉伸，纵向自动匹配大小）
     
  • DIV样式（元素居中显示）

IMG样式

（横向拉伸，纵向自动匹配大小）

 width:100%;
 height:auto;

（纵向拉伸，横向自动匹配大小）

 width:auto;
 height:100%;

DIV样式（元素居中显示）

 display:flex;
 align-items:center; 
 justify-content:center;

做法很简单，只要设置对应图片的width和htight的具体数值就可以了。看下面的例子：

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

这样设置图片的话，可以使图片在指定的空间内缩放。4行的意思是：

  • width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
  • height:auto;图片的高度自己适应(图片有多高就显示多高)
  • width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
  • max-width:100%;图片的宽度不能超过图片所在的空间的宽度
  • max-height:100%;图片的高度不能超过图片所在的空间的高度
  • max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

示例代码

如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示

<html>
<head>
<title>让图片自动适应DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
   /*为了效果明显，可以将如下边框打开，看一下效果*/
   /* border:1px solid black; */
}

.ShaShiDi img{
 width:100%;
 height:auto;
}

</style>
</head>
<body>
 <div class="ShaShiDi">
  <img src="./1.png"/>
 </div>
 <div class="ShaShiDi">
  <img src="./2.png"/>
 </div>
</body>
</html>

 以上就是HTML如何让IMG自动适应DIV容器大小的实现方法的详细内容，更多关于HTML IMG自动适应DIV的资料请关注脚本之家其它相关文章！


原文链接：https://m.jb51.net/html5/714382.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：图解 Docker 架构 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐