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

时间：2021-05-08

为了让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; }.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的资料请关注其它相关文章！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章