雖然CSS3無法直接“調整”圖像大小，但您可以使用媒體查詢和響應式設計原則，讓圖像在瀏覽器中看起來已調整大小。
其理念是讓圖像響應視口尺寸，確保圖像不會超出邊緣。如果視口高度大於寬度，則必須定義最大寬度；如果視口寬度大於高度，則必須定義最大高度。
以下是一些示例代碼以及更多相關文章的鏈接。請注意img.ri:empty的使用，empty是一個結構性偽類，僅匹配沒有子元素的元素（圖像不應該有任何子元素）。這是一個CSS3選擇器，因此IE8及以下版本將無法解析該聲明。
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}有關響應式圖像的更多信息，以下是一些文章，其中包含有關創建響應式居中圖像的更多信息、使用CSS3維護圖像縱橫比的指南以及background-size屬性的完整指南。
在CSS中調整圖像大小而不損失質量，需要使用正確的CSS屬性。可以使用width和height屬性調整圖像大小。但是，為了保持縱橫比並防止變形，應只指定其中一個屬性，另一個屬性應設置為auto。例如：
img {
width: 100%;
height: auto;
}此代碼將調整圖像大小以適應其容器的寬度，同時保持其縱橫比，從而保持其質量。
object-fit屬性的作用是什麼？ CSS中的object-fit屬性用於指定如何調整圖像或視頻的大小以適應其容器。它有五個可能的值：fill、contain、cover、none和scale-down。 fill值將圖像拉伸以適應容器，如果圖像的縱橫比與容器的不同，則可能會使圖像變形。 contain值將圖像調整大小以適應容器，同時保持其縱橫比，這可能會使容器中留下一些未覆蓋的空間。 cover值將圖像調整大小以覆蓋整個容器，同時保持其縱橫比，這可能會裁剪圖像的某些部分。 none值根本不調整圖像大小。 scale-down值的行為類似於contain或none，取較小的那個。
在CSS中使圖像具有響應性，需要使用max-width屬性，其值為100%。這使得圖像在需要時可以縮小，但決不會放大到超過其原始大小。例如：
img {
max-width: 100%;
height: auto;
}此代碼將使圖像具有響應性，這意味著它將根據其容器的大小調整自身大小，並且它將保持其縱橫比，從而防止變形。
在CSS中調整背景圖像的大小，需要使用background-size屬性。它有幾個可能的值，包括auto、cover、contain和特定尺寸。 auto值將背景圖像調整為其實際大小。 cover值將背景圖像調整大小以覆蓋整個容器，即使它必須拉伸圖像或從其邊緣裁剪一點。 contain值將背景圖像調整大小以確保圖像完全可見。可以給出特定尺寸以將背景圖像調整為一定的寬度和高度。例如：
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}此代碼將調整背景圖像的大小以覆蓋網頁的整個主體。
在CSS中將圖像調整為特定的寬度和高度，需要使用width和height屬性以及特定值。但是，如果圖像的縱橫比與指定的寬度和高度的比率不同，這可能會使圖像變形。為了防止變形，應只指定其中一個屬性，另一個屬性應設置為auto。例如：
img {
width: 100%;
height: auto;
}此代碼將圖像調整為500像素寬，同時保持其縱橫比。
在CSS中調整圖像大小後將其居中，可以使用margin屬性，其值為auto。當圖像顯示為塊級元素時，這有效，可以使用display屬性和block值來指定。例如：
img {
max-width: 100%;
height: auto;
}此代碼將圖像在其容器內水平居中。
在CSS中調整圖像大小而不拉伸它，需要保持其縱橫比。這可以通過只指定width和height屬性中的一個屬性並將另一個屬性設置為auto來實現。例如：
body {
background-image: url("image.jpg");
background-size: cover;
}此代碼將圖像調整大小以適應其容器的寬度，同時保持其縱橫比，從而防止拉伸。
在CSS中調整圖像大小並保持其縱橫比，需要只指定width和height屬性中的一個屬性並將另一個屬性設置為auto。例如：
img {
width: 500px;
height: auto;
}此代碼將圖像調整大小以適應其容器的寬度，同時保持其縱橫比。
在CSS中調整圖像大小以適應屏幕，需要使用vw（視口寬度）單位作為width屬性的值，以及vh（視口高度）單位作為height屬性的值。例如：
img {
display: block;
margin: auto;
}此代碼將調整圖像大小以適應整個屏幕，而不管屏幕大小如何。
在CSS中調整圖像大小以填充其容器，需要使用object-fit屬性，其值為fill。例如：
@media screen and (orientation: portrait) {
img.ri { max-width: 90%; }
}
@media screen and (orientation: landscape) {
img.ri { max-height: 90%; }
}此代碼將拉伸圖像以適應其容器，如果圖像的縱橫比與容器的不同，則可能會使圖像變形。為了防止變形，可以使用object-fit屬性，其值為cover，這將調整圖像大小以覆蓋整個容器，同時保持其縱橫比，即使它必須裁剪圖像的某些部分。
以上是如何使用CSS'調整”圖像的詳細內容。更多資訊請關注PHP中文網其他相關文章！
