img自适应容器大小

发表于 |

有这样一个场景:如何让img自适应容器（div）图片，必须等比缩放

1
2
3
4

 <div>
  <img src="xxx.jpj" />
</div>

在我们一般的使用过程中可能会

1
2
3
4
5

img{
  width:100%;
  height:100%;
}

但是如此使用我们的图片会打拉伸，会失真，其实我可以这样来设置

1
2
3
4
5

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

拿我们来看看width和max-width或者说height和max-height

其实这里有一个需要我们记住的概念
width或者height是相对于父元素
而max-width或者max-height是相对于img自身元素

这样我们就不难理解了所以为了不让图片失真，我们设置图片最大的大小为图片自身的大小

我们在来看看max-XX的具体可以设置那些值

  • none，规定元素的最大宽（高）度没有限制

  • length ，规定元素最大宽（高）度为 length

  • %，规定元素宽（高）为包含他块级元素的百分比，比如父亲为100PX 这里设置20%就是最大为20px

  • inherit，规定应该从父元素继承 max-width 属性的值。

如果对您有所帮助或者对博主有更多的话说，欢迎你去我的GitHub留下一个您的start和issues

前往LEE的github给他一个Start鼓励一下吧