建站
咨詢
售后
建站咨詢
新聞中心
了解css將圖片等比縮放的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！
成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括灤州網(wǎng)站建設(shè)、灤州網(wǎng)站制作、灤州網(wǎng)頁(yè)制作以及灤州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，灤州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到灤州省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
css將圖片等比縮放的方法：可以利用object-fit屬性來實(shí)現(xiàn)，如【object-fit: cover;】。object-fit屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度和寬度。
屬性介紹：
object-fit 屬性指定元素的內(nèi)容應(yīng)該如何去適應(yīng)指定容器的高度與寬度。
object-fit 一般用于 img 和 video 標(biāo)簽，一般可以對(duì)這些元素進(jìn)行保留原始比例的剪切、縮放或者直接進(jìn)行拉伸等。
語法：
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
屬性值：
fill 默認(rèn)，不保證保持原有的比例，內(nèi)容拉伸填充整個(gè)內(nèi)容容器。
contain 保持原有尺寸比例。內(nèi)容被縮放。
cover 保持原有尺寸比例。但部分內(nèi)容可能被剪切。
none 保留原有元素內(nèi)容的長(zhǎng)度和寬度，也就是說內(nèi)容不會(huì)被重置。
scale-down 保持原有尺寸比例。內(nèi)容的尺寸與 none 或 contain 中的一個(gè)相同，取決于它們兩個(gè)之間誰得到的對(duì)象尺寸會(huì)更小一些。
initial 設(shè)置為默認(rèn)值
inherit 從該元素的父元素繼承屬性。
舉例：
對(duì)圖片進(jìn)行剪切，保留原始比例：
img.a {
width: 200px;
height: 400px;
object-fit: cover;
}感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)css將圖片等比縮放的方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前名稱：css將圖片等比縮放的方法
文章位置：http://fisionsoft.com.cn/article/phojos.html
