如何让图片保持原比例,占满整个盒子 |
您所在的位置:网站首页 › 百达翡丽5167r001盒子图片 › 如何让图片保持原比例,占满整个盒子 |
在项目的过程中,经常遇到客户上传的图片,有些图片的大小和盒子的大小不匹配。我们有时候会采用裁剪图片,有时候会使用最铺满这个盒子类似(background-size:contain)。 给图片设置成max-width:100%;max-height:100%; 具体代码如下: Document body{ margin: 0; } div{ width: 200px; height: 200px; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #000; background-color: #f00; } img{ max-width: 100%; max-height: 100%; vertical-align: middle; }![]() ![]() ![]() 效果如下: |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |