寶器收納5招,空間立刻變大 | 這寶器超實用!主婦都愛用 | 寶器挑選指南,新手必看
最近在整理家裡的時候,翻出阿嬤留下來的幾件「寶器」,那些看起來舊舊的老物件,沒想到在網路上查了之後才發現原來都是很有價值的古董。這讓我突然想到,其實在網頁設計裡,圖片處理也是一門學問,就像對待傳家寶一樣要小心呵護呢! 說到在網頁上放圖片,很多人第一個煩惱就是怎麼讓圖片乖乖聽話。我整理了一些常見問題跟解決方法,跟大家分享一下: 問題類型 常見狀況 解決小技巧 圖片顯示不出來 路徑錯誤或格式不對 檢查檔案路徑是否正確,確認圖片格式是常見的jpg/png 圖片變形 強制拉伸導致比例不對 用CSS的object-fit: cover保持比例 圖片太大 影響網頁載入速度 先用Photoshop壓縮,再用<picture>標籤響應式載入 圖片位置不對 跟文字排版亂跑 用float或flexbox來控制排版 記得前陣子幫朋友看他的部落格,他抱怨說明明上傳了圖片卻怎麼都顯示不出來,後來才發現是把圖片放在本地端卻沒上傳到伺服器。這種情況就像把寶器鎖在保險箱裡卻忘記帶鑰匙一樣,東西明明在卻看不到啊! 另外一個常見問題是圖片hover效果。有時候我們會想要讓圖片有點互動感,像是滑鼠移過去會變色或放大。這時候CSS的hover就很好用,可以這樣寫: css .img-hover { transition: all 0.3s ease; } .img-hover:hover { […]