在網頁開發中，表單是我們經常用到的元素之一。而在表單中放置圖片也是極為常見的操作。下面就來介紹一下在表單里放置圖片CSS的方法。
首先，我們需要在html代碼中將表單和圖片都創建出來：
``````
接下來，我們需要定義CSS來讓圖片顯示在表單中。我們可以使用CSS選擇器來選擇表單元素并設置樣式。下面是一個例子：
```
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 10px;
}
input[type="file"] {
margin-bottom: 20px;
}
img {
margin-top: 20px;
max-width: 100%;
}
```
可以看到，這里我們使用了flex布局，并且設置了一些margin和max-width等屬性。
最后，我們還需要添加一些JavaScript代碼，以便實現選擇圖片后能夠預覽圖片功能。下面是一個簡單的實現：
```
const fileInput = document.getElementById("file");
const previewImg = document.getElementById("preview");
fileInput.addEventListener("change", function(){
const file = this.files[0];
const reader = new FileReader();
reader.addEventListener("load", function(){
previewImg.src = reader.result;
previewImg.style.display = "block";
});
reader.readAsDataURL(file);
});
```
以上的代碼中使用了FileReader接口去讀取被選擇后的圖片，并使用DataURL格式以Base64編碼輸出，然后將圖片作為img元素的src屬性。
通過上述三個步驟，我們便可以非常容易地在表單中放置圖片，并且對它們進行CSS樣式的調整。
上一篇如何學習css開發
下一篇如何修改圖標顏色 css