如何適應 api 呼叫中的圖像?
P粉138871485
P粉138871485 2023-09-05 13:36:09
0
1
441
<p>我第一次在這裡發布任何內容,如果我遺漏了什麼,請告訴我!好的,所以我的問題是類別頁面中的圖像彼此不適合併且不再對齊。這是在我學習了一點 JavaScript 並從 API 呼叫中獲取圖像之後發生的。現在它們看起來不再那麼好......尤其是在移動視圖中。我怎樣才能使它們的尺寸相同?順便說一句,我完全是個菜鳥。 這是我的頁面的連結:https://lovely-croissant-3cceca.netlify.app/</p> <p>我嘗試用 CSS 修復它,但當我更改某些內容時它不再「反應」。類別頁面中的移動視圖,圖像太高。但是,當我嘗試在媒體查詢中降低它們時,桌面版本也會發生變化。我知道這可能是我在嘗試 javascript 時所做的事情。我也無法將名稱“test”更改為其他名稱,因為一切都會受到干擾......</p>
P粉138871485
P粉138871485

全部回覆(1)
P粉848442185

重要的是輸出,而不是透過 API 呼叫圖像,我們可以使用 CSS 來處理結果。

電影標題將影像壓低,因為它們在同一個容器中,所以我們必須給予它們高度。

圖像的比例不同,因此您可以使用object-fit: cover 以最小圖像高度的最大尺寸裁剪圖像。

在行動裝置上:您需要將overflow設定為visible,並從.container-中取出padding child 也是如此(否則會有多個額外的空格),並且僅添加到父級。

像這樣的事情,會做到:

.container-child p {
       height: 50px;
       text-align: center;
       display: block;
   }
    /*from here the responsive code*/
    @media (max-width:1624px){
        .container-child img {
          object-fit: cover;
          max-width: 500px;
          max-height: 709px; /*the smallest image*/
          width: 100%;
          height: 100%;
        }
    }
    @media (max-width: 768px) {
    .container-child {
        padding-top: 0em; 
        display: inline-block;
        text-align: center;
       }
       #test {
        margin-top: 130px;
        display: inline-block;
        text-align: center
       }
       html, body {
        overflow: visible;
        background: #000;
       }
    }
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板