在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > IT技术 >

CSS实现图片裁剪居中

CSS实现图片裁剪居中
 
其实,css实现起来很简单,只需要设置img的样式:object-fit:none即可,不过你要给img一个高度,因为裁剪嘛
 
页面:(图片可以自己随便截两张来测试)
 
<!--长图片-->
<div class="banner">
     <img :src="require('../../static/img/h.jpg')" alt="">
</div>
<!--宽图片-->
<div class="banner">
     <img :src="require('../../static/img/w.jpg')" alt="">
</div>
样式:
 
.banner {
    width: 375px;
    height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.banner img {
    width: 100%;
    height: 100%;
    /*object-fit:cover;*/
    object-fit:none; none则不改变图片原始尺寸
}
   object-fit: cover会按照图片原始宽高比对图片进行缩放,无法解决比如宽图片的高度比盒子的高度小,会让图片放大模糊的问题,而none是不改变原始尺寸的,这里我改用了none,满足我的要求。
 
 【CSS中的object-fit属性知识介绍】:
 
   它有以下5个可用值,作用如下:
 
    [   fill ]:被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
 
    [   contain ]:被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
 
    [   cover ]:被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
 
    [   none ]:被替换的内容尺寸不会被改变。
 
    [   scale-down ]:内容的尺寸就像是指定了none或contain,取决于哪一个将导致更小的对象尺寸。
 

相关文章:

  • PHP去除BOM头的方法 BOM头是UTF-8来告诉编辑器:我是UTF8编码。它的编码是\xEF\xBB\xBF 但是PHP在设计之初并没有考虑到BOM头的问题,所以在编解码的时候很容易出现问题 代码如下: $result = trim($re...

  • CSS背景图片自适应全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的滤镜 }...

  • $str = file_get_contents(weixinname.txt);//将整个文件内容读入到一个字符串中 $str_encoding = mb_convert_encoding($str, UTF-8, UTF-8,GBK,GB2312,BIG5);//转换字符集(编码) $arr = explode(\r\n, $str_encoding);//转换成数组 //去...

  • 在线HTML实体转字符串工具 #22235;在线HTML实体转汉字 HTML实体编码互转 https://uutool.cn/html2str/ http://www.toolzl.com/tools/htmlende.html...

  • 使用百度编辑器上传附件后,附件的图标,引用的是绝对URL,一下子完整暴露了编辑器所在目录,甚至后台入口也完全暴露了: 要解决这个问题,有两个方法: 前提是要把ueditor\dialogs\attachm...

  • 插件界面 插件功能 支持记录当天审核记录 支持可控时间段审核 支持可控栏目审核 支持审核后生成HTML,包括首页,栏目列表页,内容页 支持审核后推送到百度和熊掌 支持查看推送记录 使用...

  • display: table-cell table-cell属性让标签元素以表格单元格的形式呈现。兼容IE8+,会被以下CSS属性破坏: float position // 设置display: table-cell的元素对宽高敏感,margin无反应,响应padding 实现大小不固定...

  • Viewport viewport:可视窗口,也就是浏览器。 vw Viewport宽度, 1vw 等于viewport宽度的1% vh Viewport高度, 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的数学运算规则,但是也提供更智能的功能:...

  • 1. (function(){}())与(function(){})() 这两种写法,都是一种 立即执行函数 的写法,即IIFE (Immediately Invoked Function Expression)。这种函数在函数定义的地方就直接执行了。 通常的函数声明和调用分开的写...

  • 浏览器缓存有时挺大的,修改网站后半天看不到效果,今天西安蟠龙小编总结几种清缓存看网站修改效果的方法 清缓存方法: 一、ctrl+f5 多刷新几次 二、用浏览器的无痕模式或者隐私模式 三...

  • 公司:西安蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信:187 2951 9978
  • Q Q: 136 8888 63 点击这里给我发消息
  • 地址:西安市雁塔区唐延南路11号逸翠园i都会
  • PHP删除BOM头的方法

    PHP去除BOM头的方法 BOM头是UTF-8来告诉编辑器:我是UTF8编码。它的编码是\xEF\xBB\xBF 但是PHP在设计之初并没有考虑到BOM头的问题,所以在编解码的时候很容易出现问题 代码如下: $result = trim($re...

  • CSS实现图片裁剪居中

    CSS实现图片裁剪居中 其实,css实现起来很简单,只需要设置img的样式:object-fit:none即可,不过你要给img一个高度,因为裁剪嘛 页面:(图片可以自己随便截两张来测试) !--长图片-- div clas...

  • CSS背景图片自适应全屏

    CSS背景图片自适应全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的滤镜 }...

  • php 读取txt文本文件中的内容,转换成数组

    $str = file_get_contents(weixinname.txt);//将整个文件内容读入到一个字符串中 $str_encoding = mb_convert_encoding($str, UTF-8, UTF-8,GBK,GB2312,BIG5);//转换字符集(编码) $arr = explode(\r\n, $str_encoding);//转换成数组 //去...

  • 专题页面是百度付费推广最有效的方法

    百度已经成为国内最大的搜索引擎,占据80%的市场分额,每天接受网名的搜索高达几亿次,确实很多人用,有很多好处才用吧。别的搜索引擎还是得多多改进,才能更好的抢占商机。 百...弄个网站需要多少钱网站制作需要多少钱建站哪家好

  • 在线HTML实体转字符串工具 &#22235;在线HTML实体转汉字

    在线HTML实体转字符串工具 #22235;在线HTML实体转汉字 HTML实体编码互转 https://uutool.cn/html2str/ http://www.toolzl.com/tools/htmlende.html...