在線客服與您一對一交流
當前位置: 主頁 > 行業新聞 > 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...

下载手机棋牌游戏五张 河南快3视频在线直播 福建11选5一定 股米网 怎么分析股票涨停 贵州十一选五走势图近40期 浙江11选五开一定牛 体彩金7乐中奖查询 广东福彩好彩1怎么玩 股票指数怎么看涨跌 浙江体彩十一选五遗漏