如何使用 CSS 代码实现图片自适应容器大小并保持原有比例？

自适应图片容器的实现

为了让图片自适应容器大小并保持原有比例，可以采用以下 css 代码：

img {       max-width: calc(100% - 40px);       max-height: calc(100% - 40px);       position: absolute;       inset: 20px;       margin: auto;     }

代码解析：

• max-width 和 max-height 属性限制了图片的最大宽度和高度，确保图片不会超出容器范围。
• position: absolute; 属性使图片脱离正常文档流，能够根据 inset 属性定位。
• inset: 20px; 属性在容器内形成一个 20px 的边框，使图片始终保持一定的边距。
• margin: auto; 属性使图片在容器内水平垂直居中。