css图片自适应div不变形

CSS作为前端开发中常用的一种技术，其具有样式控制和布局控制的特性，所以经常用于网站的界面设计。

在前端开发中，经常遇到一个问题，就是如何让图片自适应其所在的容器，而不会因为缩放而变形。今天我们就来探讨一下如何实现这个功能。

首先，为了确保图片和容器比例相同，我们需要设置容器的宽高比。这可以通过利用padding来实现。比如，如果容器的宽高比是4:3，则可以设置padding-bottom为75%。

    .container{
            position:relative;
            width:100%;
            padding-bottom:75%;
    }

接下来，我们需要让图片以完全覆盖整个容器。可以通过设置position为absolute，然后将左右和上下两个方向都设为0，这样就可以实现图片尺寸的自适应。

    .img-responsive{
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            max-width: 100%;
            max-height: 100%;
    }
    

最后，我们只需要将图片和容器一起包裹在一个中，并将其设置为相对定位，这样我们就可以实现图片自适应的不变形了。

    div class="wrapper">
            div class="container">
                img src="pic.jpg" alt="pic" class="img-responsive">
            /div>
        /div>
    

通过以上这些代码及设置，我们就能够轻松地实现图片自适应的不变形了。值得注意的是在设置padding-bottom时应该根据容器的实际大小和宽高比来确定，而在设置图片的相对位置时应该设置max-width和max-height来确保图片在自适应的同时不会变形。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！