• 技术文章 >Web开发 >css教程

    css img失真的解决办法

    小妮浅浅小妮浅浅2021-09-14 16:44:00原创86

    1、打开相应的css文件。

    2、通过设置“object-fit:none;”来保留原有元素内容的长度和宽度即可。

    屏幕1920像素,设置img的width:1920px固定尺寸,图片不失真,设置width:100%图片失真。

    img{
          display:block;  /*img图片比父元素高度小几个像素,设置为块元素,使得父子div高度一致*/
          width:100%;
    }

    解决为了使图片自适应屏幕大小,设置width:100%导致图片失真问题

    object-fit: none;    /*保留原有元素内容的长度和宽度*/

    如果效果不明显,可以选取一个带文字的图片,可以很好的看出清晰度差别

    img{
     
          width:100%;
     
          max-width:100%;
     
          object-fit:none;
     
    }

    但是要注意,设置了object-fit:none后,当屏幕尺寸小于图片大小的时候,图片会自动裁剪至中间位置

    以上就是css img失真的解决办法,希望对大家有所帮助更多css学习指路:css教程

    本文转载于php中文网,如有侵犯联系作者修改。

    专题推荐:css img
    品易云
    上一篇:css英文名称如何理解 下一篇:没有了

    相关文章推荐

    • css中a标签伪类如何使用• css中背景定位有哪些方法• css背景有哪些应用• css3新增哪些背景属性• css首行缩进text-indent的实现• css文本修饰text-decoration的使用• css文字间距的使用• css中flex是什么• css overflow属性有什么用• css中z-index属性• css样式的组成• css选择器是什么意思• css浮动产生的负作用• css盒子模型的属性介绍• css英文名称如何理解

    全部评论我要评论

    © 2021 Python学习网 苏ICP备2021003149号-1

  • 取消发布评论
  • 

    Python学习网