做网页时, 经常需要展示图片, 但图片的尺寸都不一样, 如何做到图片自动缩放呢?
1, 实现 img 图片的自动缩放, 我们可以使用 CSS 样式:
- img{
- width: 100%;
- }
- <div>
- <img src="..." alt="image">
- <div>
这里使用 width 为 100%,height 就会自动适应, 不会导致图片被拉伸.
2,img 标签在固定高宽的 div 里的显示, 可以试一下使用 CSS 属性 object-fit 属性.
它的几个属性
- fill(不保持纵横比缩放图片, 使图片完全适应)
- contain(保持纵横比缩放图片, 使图片的长边能完全显示出来)
- cover(保持纵横比缩放图片, 只保证图片的短边能完全显示出来)
- none(保持图片宽高不变)
- scale-down(当图片实际宽高小于所设置的图片宽高时, 显示效果与 none 一致; 否则, 显示效果与 contain 一致)
- inherit
- initial
- unset
来源: http://www.css88.com/qa/css3/14182.html