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)指定容器的高度與寬度。

(學(xué)習(xí)視頻分享：css視頻教程)

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;

}

相關(guān)推薦：CSS教程

總結(jié)

以上是生活随笔為你收集整理的html中如何等比缩小图片,css如何将图片等比缩放的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。