测试2

background中的cover与contain的区别

  • contain：将图片缩放至宽度或者高度能够完全适应容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则容器会留白，不会出现图片的裁剪。例如，对于一个宽度为200px、高度为200px的容器，背景图片使用background-size: contain，并且图片的宽度为300px，高度为150px，则图片会被等比例缩放至宽度为200px，高度为100px，留下50px的空白区域。
  • cover：将图片缩放至能够铺满整个容器，并且保持图片宽高比不变。如果容器宽高比与图片宽高比不同，则图片多余的部分会被裁剪。例如，对于一个宽度为200px、高度为200px的容器，背景图片使用background-size: cover，并且图片的宽度为300px，高度为150px，则图片会被等比例缩放至宽度为400px，高度为200px，并且裁剪掉多余的部分。
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/letgofishing/p/17277519.html

标签： HTML CSS HTML5 CSS3
你还没有登录，请先登录或注册！
  • 还没有人评论，欢迎说说您的想法！

相关课程

HTML5网页标签
3949 0元 限免
云知梦-HTML5网页标签
4610 0元 限免