CSS圖片大小變化設(shè)置

在CSS中，我們可以使用多種方法來改變圖片的大小，以下是一些常見的方法：

1、使用width和height屬性

通過CSS的width和height屬性，我們可以直接設(shè)置圖片的寬度和高度，將圖片的寬度設(shè)置為200px，高度設(shè)置為300px：

img {
  width: 200px;
  height: 300px;
}

2、使用max-width和max-height屬性

與width和height不同，max-width和max-height屬性允許圖片在達(dá)到***大寬度或高度之前進(jìn)行縮放，這可以確保圖片在較小的屏幕上不會(huì)過大。

img {
  max-width: 100%;
  max-height: 100%;
}

3、使用object-fit屬性

object-fit屬性可以改變圖片內(nèi)部的填充方式，從而實(shí)現(xiàn)不同效果的縮放，使用cover可以讓圖片覆蓋整個(gè)容器，同時(shí)保持其寬高比：

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4、使用transform屬性

transform屬性可以實(shí)現(xiàn)圖片的多種變換效果，包括縮放，通過縮放(scale)函數(shù)，我們可以改變圖片的大小，將圖片縮小到原來的0.5倍：

img {
  transform: scale(0.5);
}

需要注意的是，使用transform屬性進(jìn)行縮放時(shí)，圖片可能會(huì)失去原有的寬高比，導(dǎo)致圖片變形，在使用時(shí)需要謹(jǐn)慎。