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

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

© 版权声明
THE END
喜欢就支持一下吧
点赞10 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容