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

图片宽高自适应难题

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

解决方案

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

<div style="width:50%">   <img src="/seller/templateshttps://segmentfault.com/img/bg_logo_left.png" alt=""   style="max-width:90%"> </div>

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