HTML怎样让IMG全自动融入DIV器皿尺寸的完成方式

日期:2021-02-22 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

以便让IMG自融入尺寸,以下我做了1个横向自融入的示例:

  • 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;1起应用就意味着着显示信息照片的初始规格(能够了解为沒有甚么功效)
  • max-width:100%;照片的宽度不可以超出照片所属的室内空间的宽度
  • max-height:100%;照片的高宽比不可以超出照片所属的室内空间的高宽比
  • max-width:100%;max-height:100%;1起应用就意味着这照片的宽高规格最大不可以超出它所属的室内空间的宽高。

示例编码

以下是两个尺寸和占比都不一样的照片,运用这个方式可让照片全自动填充并垂直居中显示信息

<html>
<head>
<title>让照片全自动融入DIV器皿尺寸</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
   /*以便实际效果显著,能够将以下边框开启,看1下实际效果*/
   /* 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的材料请关心脚本制作之家其它有关文章内容!