本文目錄導(dǎo)讀：

1. 使用CSS的object-fit屬性

如何讓圖片成比例顯示？

在網(wǎng)頁(yè)設(shè)計(jì)中，保持圖片的成比例顯示是非常重要的，這不僅能讓圖片看起來(lái)更加美觀，還能避免頁(yè)面布局出現(xiàn)混亂，下面是一些方法來(lái)實(shí)現(xiàn)圖片的成比例顯示。

一、使用HTML標(biāo)簽的width和height屬性

在插入圖片時(shí)，可以通過(guò)HTML的img標(biāo)簽設(shè)置圖片的寬度和高度屬性，這兩個(gè)屬性可以讓圖片按照指定的尺寸顯示，從而保持圖片的成比例。

<img src="image.jpg" width="500" height="300">

在這個(gè)例子中，圖片的寬度被設(shè)置為500像素，高度被設(shè)置為300像素，這樣，圖片就會(huì)按照設(shè)定的尺寸顯示，保持成比例。

使用CSS的object-fit屬性

除了使用HTML標(biāo)簽的width和height屬性外，還可以使用CSS的object-fit屬性來(lái)控制圖片的填充方式，這個(gè)屬性可以讓圖片按照指定的方式填充容器，從而保持圖片的成比例顯示。

img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* 或者其他合適的值 */
}

在這個(gè)例子中，圖片的寬度被設(shè)置為容器的100%，高度被設(shè)置為固定的200像素，使用object-fit屬性來(lái)控制圖片的填充方式，這樣，圖片就會(huì)按照指定的方式填充容器并保持成比例顯示。

無(wú)論是使用HTML標(biāo)簽的屬性還是CSS的屬性，都可以實(shí)現(xiàn)圖片的成比例顯示，在實(shí)際應(yīng)用中，可以根據(jù)具體的需求選擇適合的方法來(lái)實(shí)現(xiàn)圖片的成比例顯示。