如何適應 api 呼叫中的圖像?
P粉138871485
2023-09-05 13:36:09
<p>我第一次在這裡發布任何內容,如果我遺漏了什麼,請告訴我!好的,所以我的問題是類別頁面中的圖像彼此不適合併且不再對齊。這是在我學習了一點 JavaScript 並從 API 呼叫中獲取圖像之後發生的。現在它們看起來不再那麼好......尤其是在移動視圖中。我怎樣才能使它們的尺寸相同?順便說一句,我完全是個菜鳥。
這是我的頁面的連結:https://lovely-croissant-3cceca.netlify.app/</p>
<p>我嘗試用 CSS 修復它,但當我更改某些內容時它不再「反應」。類別頁面中的移動視圖,圖像太高。但是,當我嘗試在媒體查詢中降低它們時,桌面版本也會發生變化。我知道這可能是我在嘗試 javascript 時所做的事情。我也無法將名稱“test”更改為其他名稱,因為一切都會受到干擾......</p>
重要的是輸出,而不是透過 API 呼叫圖像,我們可以使用 CSS 來處理結果。
電影標題將影像壓低,因為它們在同一個容器中,所以我們必須給予它們高度。
圖像的比例不同,因此您可以使用
object-fit: cover
以最小圖像高度的最大尺寸裁剪圖像。在行動裝置上:您需要將
overflow
設定為visible
,並從.container-中取出
也是如此(否則會有多個額外的空格),並且僅添加到父級。padding
child像這樣的事情,會做到: