iT邦幫忙

2022 iThome 鐵人賽

DAY 10
0
Modern Web

React 新手村 - 填坑記系列 第 10

React 新手村 - 填坑記 - Day10 開發問題(六)

  • 分享至 

  • xImage
  •  

next/image 常見問題

今日身體不適後面再修正/images/emoticon/emoticon06.gif/images/emoticon/emoticon46.gif

  1. next/image 元件的載入圖片,都會透過 next server 去調整圖片大小
  2. 無法獲得圖像的自動比例高度
    當您使用帶有 layout='fill' 的下一個圖像時,圖像將使用相對位置填充第一個父元素的空間。包含圖像的 div 具有相對位置,但沒有固定的寬度和高度。

1.它的寬度由父 'blocks' 網格元素決定,因為規則 grid-template-columns。列是關於寬度,而不是高度。
2.它的高度由h2.title和p.about的子div的高度決定。這就是它如此小而寬的原因。
在您的情況下,最好的解決方案是在具有相對位置的 div 上設置固定的高度和寬度,並使用各種分辨率的媒體查詢調整其值。給它一個 className 並設置 css 規則位置、寬度、高度,不要將內聯樣式與 css 文件中的樣式混合。

上一篇
React 新手村 - 填坑記 - Day9 開發問題(五)
下一篇
React 新手村 - 填坑記 - Day11 開發問題(七)
系列文
React 新手村 - 填坑記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言