CSS手動拉伸圖片是web開發中十分常用的技巧之一，通過調整圖片的寬度和高度來達到所需的尺寸。

img {
width: 100%;
height: auto;
}

上述代碼可以將圖片的寬度拉伸至父元素的100%寬度，并根據圖片的比例自動調整高度。這可以使圖片適應不同屏幕大小，并保持圖片的比例不失真。

當圖片需要在容器中水平或垂直居中時，可采用以下代碼：

.container {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}

使用flex布局使容器中的圖片水平和垂直居中，同時通過max-width和max-height屬性保持圖片比例，確保圖片不會失真。

最后，有些圖片需要進行裁剪，使其更加適合網頁布局，可以通過CSS中的裁剪屬性來實現。

.cropped-image {
width: 100px;
height: 100px;
overflow: hidden;
}
.cropped-image img {
width: 100%;
height: auto;
margin-left: -25px;
margin-top: -25px;
}

使用overflow:hidden屬性將超出容器部分的圖片隱藏起來，然后使用負的margin值將圖片位置調整至需要的位置。