調整css圖片大小的核心在于合理使用width、height、Object-fit、max-width等屬性。1. 設置width和height可直接控制圖片尺寸，但需配合auto保持比例以避免變形；2. 使用max-width和max-height可限制圖片最大尺寸，實現響應式設計；3. object-fit屬性定義圖片如何適應容器，常用值包括cover（覆蓋容器并裁剪）、contain（完整顯示并留白）、fill（拉伸填充）等；4. 響應式圖片可通過srcset與sizes屬性實現，根據屏幕尺寸加載不同大小的圖片資源；5. svg矢量圖通過設置width和height實現無損縮放；6. css sprites技術合并多圖減少請求，提升加載速度；7. 圖片加載失敗時，可用::before偽元素結合content屬性顯示占位符信息。
調整CSS圖片大小，核心在于控制width、height屬性，以及靈活運用object-fit和max-width等屬性，來實現響應式和精細化的圖片顯示效果。
控制圖片大小的方法有很多，最直接的就是設置width和height，但要小心變形。
CSS圖片大小調整教程
立即學習“前端免費學習筆記（深入）”；
如何使用width和height屬性調整圖片大?。?/h3>
這是最基礎的方法。你可以直接在CSS中為標簽或包含圖片的容器設置width和height。
img { width: 300px; height: 200px; }
但問題來了，如果圖片的原始比例和設置的width、height比例不一致，圖片就會變形。所以，通常建議只設置一個值，另一個值設置為auto，保持原始比例。
img { width: 300px; /* 高度會自動調整，保持比例 */ height: auto; }
或者
img { height: 200px; /* 寬度會自動調整，保持比例 */ width: auto; }
max-width和max-height有什么用？如何使用？
max-width和max-height可以限制圖片的最大尺寸，防止圖片超出容器。這在響應式設計中非常有用。
img { max-width: 100%; /* 圖片最大寬度為容器的100% */ height: auto; /* 高度自動調整 */ }
這樣，圖片會根據容器的大小自動縮放，但不會超過原始尺寸。如果原始尺寸小于容器，圖片會保持原始大小。
舉個例子，如果容器寬度是500px，圖片原始寬度是800px，那么圖片會縮小到500px。如果圖片原始寬度是300px，那么圖片會保持300px。
object-fit屬性是什么？有哪些常用的值？
object-fit屬性用于指定圖片如何適應容器的大小。它非常強大，可以解決很多圖片變形的問題。
常用的值有：
- cover: 保持圖片的寬高比，縮放圖片，使其完全覆蓋容器?？赡軙眉魣D片。
- contain: 保持圖片的寬高比，縮放圖片，使其完全顯示在容器中?？赡軙舭?。
- fill: 默認值。拉伸或壓縮圖片，使其完全填充容器。圖片可能會變形。
- none: 不縮放圖片，保持原始大小。如果圖片大于容器，會被裁剪。
- scale-down: 如果圖片小于容器，則保持原始大??；如果圖片大于容器，則效果和contain一樣。
img { width: 300px; height: 200px; object-fit: cover; /* 裁剪圖片，使其完全覆蓋容器 */ }
使用object-fit: cover時，圖片會盡可能填滿容器，但可能會裁剪掉超出容器的部分。
使用object-fit: contain時，圖片會完整顯示在容器中，但可能會在上下或左右留白。
如何實現響應式圖片？srcset和sizes屬性是什么？
響應式圖片是指根據不同的設備和屏幕尺寸，顯示不同大小的圖片。這可以提高頁面加載速度，優化用戶體驗。
srcset屬性用于指定多個圖片資源，sizes屬性用于指定不同屏幕尺寸下，圖片應該顯示的大小。
@@##@@
- srcset: 指定了三個圖片資源：image-600.jpg、image-900.jpg和image-1200.jpg，分別對應600像素、900像素和1200像素的寬度。
- sizes: 指定了不同屏幕尺寸下，圖片應該顯示的大小。
- 當屏幕寬度小于600像素時，圖片寬度為100vw（視口寬度的100%）。
- 當屏幕寬度小于900像素時，圖片寬度為50vw（視口寬度的50%）。
- 當屏幕寬度大于900像素時，圖片寬度為33.3vw（視口寬度的33.3%）。
瀏覽器會根據屏幕尺寸和設備像素比，自動選擇最合適的圖片資源。
如何處理矢量圖（SVG）的大??？
SVG是矢量圖，可以無損縮放。處理SVG的大小，通常也是通過設置width和height屬性。
<svg width="300" height="200"> <circle cx="150" cy="100" r="50" fill="red" /> </svg>
或者在CSS中設置：
svg { width: 300px; height: 200px; }
SVG的優勢在于，無論放大多少倍，都不會失真。
如何使用CSS Sprites優化圖片？
CSS Sprites是一種將多個小圖片合并成一張大圖片的技術。通過CSS的background-position屬性，可以顯示大圖片中的某一部分。
使用CSS Sprites可以減少http請求，提高頁面加載速度。
比如，將三個小圖標合并成一張大圖片：
.icon1 { width: 20px; height: 20px; background-image: url("sprite.png"); background-position: 0 0; } .icon2 { width: 20px; height: 20px; background-image: url("sprite.png"); background-position: -20px 0; } .icon3 { width: 20px; height: 20px; background-image: url("sprite.png"); background-position: -40px 0; }
background-position屬性用于指定背景圖片的位置。
圖片加載失敗時，如何顯示占位符？
可以使用CSS的::before偽元素和content屬性，在圖片加載失敗時顯示占位符。
img { width: 300px; height: 200px; object-fit: cover; background-color: #eee; /* 占位符背景色 */ } img::before { content: "Image not found"; /* 占位符文字 */ display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; color: #999; /* 占位符文字顏色 */ } img:not([src]) { /* 如果沒有src屬性，則顯示占位符 */ content: "No image"; } img:not([src])::before { content: "No image"; }
這段代碼會在圖片加載失敗或沒有src屬性時，顯示一個灰色的占位符，并顯示 “Image not found” 或 “No image” 的文字。需要注意的是，object-fit: cover 可能會影響占位符的顯示效果，需要根據實際情況進行調整。
