如何实现div背景图小于容器时原尺寸显示、超尺寸按比例缩放并兼容IE11

解决方案 #

方案1：img标签实现（推荐，纯CSS兼容IE11） #

你之前用img未实现效果是因为没有同时限制最大宽高，使用以下布局即可完全匹配需求：
父容器div的CSS：

/* 替换为你自己的容器固定宽高参数 */
width: 200px;
height: 200px;
/* 内部内容居中配置 */
display: flex;
justify-content: center;
align-items: center;

子元素img的CSS：

/* 仅限制最大宽高，不强制固定宽高，避免拉伸小图 */
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;

该方案实际效果：

• 图片尺寸小于div时，保持原图大小居中显示，无拉伸
• 图片尺寸大于div时，自动按原有宽高比等比例缩小，直到宽/高中任意一项贴合容器边界，无裁剪

方案2：background背景图实现 #

如果业务要求必须使用背景图方案，可按兼容需求选择实现方式：

不需要兼容IE11

直接使用CSSmin()函数即可实现：

background-image: url("你的图片地址");
background-position: center center;
background-repeat: no-repeat;
background-size: min(100%, 100%);

需要兼容IE11

纯CSS无原生支持方案，需通过JS辅助实现：

1. 提前加载图片获取原始宽高
2. 判断图片原始宽高与容器宽高的大小关系：
   • 宽高均小于容器：动态设置background-size: auto
   • 任意一边大于容器对应边：动态设置background-size: contain

内容的提问来源于stack exchange，提问作者ACProctor