分享模板插件精品好资源
现在位置:首页 > 网站设计 > 如何解决img固定图片宽度高度图片变形的问题(img固定尺寸图片变形解决方法)

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

作者:蓝叶 分类:网站设计 时间:2023-12-13 浏览:114

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

如何解决img固定图片宽度高度图片变形的问题.png

如何解决img固定图片宽度高度图片变形的问题,我们可以使用cssbackground语法,但使用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>

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

评论列表
挤眼亲亲咆哮开心想想可怜糗大了委屈哈哈小声点右哼哼左哼哼疑问坏笑赚钱啦悲伤耍酷勾引厉害握手耶嘻嘻害羞鼓掌馋嘴抓狂抱抱围观威武给力
提交评论

清空信息
关闭评论