如何解决img固定图片宽度高度图片变形的问题（img固定尺寸图片变形解决方法）

在网页设计中，图片的尺寸和比例是至关重要的，不合适的图片尺寸会导致页面变形和失真。在设计图文列表样式时，需要使用img标签来显示图片，为了美观往往我们会固定img的图片宽度和高度，但每篇文章的图片并不能保证都是统一的尺寸，这时候img标签显示的图片就会变形非常不美观，那么如何解决img固定图片宽度高度图片变形的问题？img固定尺寸图片变形解决方法是什么？

如何解决img固定图片宽度高度图片变形的问题，我们可以使用css的background语法，但使用background并利于seo优化，为了不影响搜索引擎抓取，尽量还是使用img标签显示图片为好，蓝叶分享的img固定尺寸图片变形解决方法，可以帮助你解决图片变形的问题，只需要把img标签的外层div设置下固定的宽度和高度，img标签设置宽度高度100%，再设置一个css属性object-fit:cover，即可解决解决img固定图片宽度高度图片变形的问题。

//下方为一个例子
<style>
.lanyeWrap{width:300px;height:120px;display:block;overflow:hidden}
.lanyeWrap img{width:100%;height:100%;object-fit:cover;}
</style>
<div class="lanyeorgWrap">
 <img src="https://lanye.org/logo.png" />
</div>