如何使用 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; 属性使图片在容器内水平垂直居中。

以上就是如何使用 CSS 代码实现图片自适应容器大小并保持原有比例？的详细内容，更多请关注其它相关文章！