css图片居中剪切,避免图片变形

css图片居中剪切,避免图片变形css 图片居中剪切 避免图片变形

不管是在pc端还是在移动端,页面都必不可少的会出现很多图片,正常情况下,我们让图片100%自适应显示的话,如图下:

css图片居中剪切,避免图片变形

在这里可以看到,图片有大有小,但是有时候我们需要图片显示的大小是一样,而且不能变形,那么我们需要加入以下代码

1.给图片设置宽高

2.加入object-fit: cover;这行代码

例如:

加入这几句代码后效果如图:

css图片居中剪切,避免图片变形

这样就可以实现想要的效果了。我这里是在移动端显示的,所以用的是rem。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/224180.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 下午12:31
下一篇 2026年3月17日 下午12:32


相关推荐

  • FurryBar最新版v2.1.7 人气热度:℃

    FurryBar最新版v2.1.7 人气热度:℃

    2026年3月14日
    3
  • IDEA中Spring配置错误:class path resource [.xml] cannot be opened because it does not exist

    IDEA中Spring配置错误:class path resource [.xml] cannot be opened because it does not exist如果在运行 Spring 项目时出现了类似于 classpathres applicationC xml cannotbeopen 这样的异常意思就是没有找到你的 xml 配置文件原因我可以肯定你一定用的是 ApplicationC newClassPath

    2026年3月17日
    2
  • 上行带宽和下行带宽是什么意思?各有什么作用?

    上行带宽和下行带宽是什么意思?各有什么作用?上行带宽和下行带宽 或者说上行速度和下行速度是什么意思 在设置路由器的限速 以及配置其它一些软件的时候经常遇到上行速度和下行速度 很多用户根本就不知道这两个所代表的意识 更不说配置了 下文将为大家进行详细的介绍 我们访问互联网的过程中存在这两种行为 一是上传数据 二是下载数据 上行宽带 速度 指的是上传的速度 而下行宽带 速度 指的是下载数据是的数度 上行宽带 速度 和下行宽带 速度 是不对称的 一般是下行速度大于上行的速度 我们平时所使用的宽带说多少 M 都是指的下行宽带 因为我们上网主要是从互联网上下

    2026年3月16日
    2
  • pycharm安装教程CSDN_java遇到解决不了的问题

    pycharm安装教程CSDN_java遇到解决不了的问题第三周开始接触python了,结果第一步装pycharm时就遇到了坑,正常安装完成后点运行时出现错误——NoJVMinstallationfound。助教说这是缺少jdk(java程序支持包),需要在网上找个最新的安装并配置下path路径。唉,编程小白,完全不知道这都是些啥o(╥﹏╥)o,于是开始了百度解决问题之路……运行pycharm错误——NoJVMinstallationfoun…

    2022年8月26日
    14
  • jmeter之badboy

    jmeter之badboy使用 badboy 录制 jmeter 脚本我第一次使用 jmeter 的时候 不知道怎么录制脚本 做接口 性能测试也无从下手 后来选择使用 badboy 录制脚本 为自己写接口测试找一个参照 badboy 的使用 1 badboy 下载地址 https badboy en softonic com 下载之后直接安装即可 2 打开 badboy 默认是开启的录制状态 在地址栏输入地址即可在百度页面搜索 badboy3 将以上操作 保存成 jmeter 可以使用的脚本 badboy jmxfile exportto

    2026年3月18日
    2
  • django drf_django 消息队列

    django drf_django 消息队列前言我们上篇文章使用到了Serializer类,可能有小伙伴说太过复杂,那么本篇就为大家带来更加简便的序列化类ModelSerializerModelSerializer先来看下ModelSer

    2022年7月29日
    19

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号