本文主要是介绍让图片(img)的最长边撑满父元素同时让图片居中、不变形，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
这里先说一个名词：元素的宽高比例，即用元素的宽除以元素的高（width / height）得到的数值就是元素的宽高比例。
要让图片的最长边撑满父元素，同时让图片不变形并且居中显示出来是分三种情况的。
第一种情况：图片的宽高比例和父元素的宽高比例相等，图片尺寸就是父元素的尺寸，这一种情况可能不常见。
第二种情况：图片的宽高比例小于父元素的宽高比例时，这个时候图片的高能完全展示出来，图片的宽则会等比例缩放。
第三种情况：图片的宽高比例大于父元素的宽高比例时，这个时候图片的宽能完全展示出来，图片的高则会等比例缩放。
当我们在开发某些需求的时候，图片的尺寸是一个很大的变量，是不可控的，我们还要想让图片的最长边撑满父元素，并且不让图片变形、居中显示出来。这个时候就需要下面的代码了。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片自适应</title><style>.box {margin: 30px auto 0;width: 600px;height: 300px;background-color: #191919;border-radius: 4px;}.box .auto-img{position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);max-width: 100%;max-height: 100%;cursor: pointer;}</style>
</head><body><div class="box"><img class="auto-img" src="https://placem.at/places?w=600&h=400" alt=""></div>
</body></html>
这篇关于让图片(img)的最长边撑满父元素同时让图片居中、不变形的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
