如何让图片在容器中宽度自适应且不失真？

golang学习网今天将给大家带来《如何让图片在容器中宽度自适应且不失真？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

图片宽高自适应难题

在设计页面时，可能遇到需要让图片宽高自适应的问题。比如，希望在宽度为 50% 的容器中插入一张图片，但图片的宽度却远超该值，导致图片变形。

解决方案

要解决这个问题，无需调整容器宽度，而是直接为图片设置样式：

<div   style="max-width:100%">
  <img src="/seller/templateshttps://segmentfault.com/img/bg_logo_left.png" alt="" style="width: auto; height: 100%;">
</div>

通过将 width 设置为 auto，图片将根据容器的宽度自动调整尺寸。同时，将 height 设置为 100%，图片将垂直填充容器的高度。这样，图片将既适应容器的宽度，又不会失真。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~