Just My Life & My Work

[iOS] 調整HTML中影像寬度 (Adjust Image Width in HTML)

2017 年 06 月 27 日

有時候App畫面需要套用Web內容，你就會發現很神奇的地方，就是Web開發者說已經調整好寬度100%，可是在我們App中顯示就是有問題，像是貓咪的臉會被截掉⋯⋯

那到底是誰的問題呢？基本上我是認為Web寫好直接套用就要呈現期望的樣子，App這邊不需要特別設定什麼。

ios-%e8%aa%bf%e6%95%b4html%e4%b8%ad%e5%bd%b1%e5%83%8f%e5%af%ac%e5%ba%a6-adjust-image-width-in-html00001

不過呢⋯⋯也許App元件本身有問題，此時就要找出替代方案，總是有前人遇過類似的問題，google就對了！

果真嘗試去改HTML檔，將CSS設定max-width:100%，而height:auto，就呈現我們要的結果啦～

/**
 Theme: Adjust Image Width in HTML
 IDE: Xcode 8
 Language: Objective C
 Date: 106/01/18
 Author: HappyMan
 Blog: https://cg2010studio.wordpress.com/
 */

NSString *strTemplateHTML = [NSString stringWithFormat:@"<html><head>
<style>img{max-width:100%%;height:auto !important;width:auto !important;};</style>

</head><body style='margin:0; padding:0;'>%@</body></html>", @"insert your html content here"];

[webView loadHTMLString:strTemplateHTML baseURL:nil];

ios-%e8%aa%bf%e6%95%b4html%e4%b8%ad%e5%bd%b1%e5%83%8f%e5%af%ac%e5%ba%a6-adjust-image-width-in-html00003

另外想說AirDrop超好用，在別台手機iPhone截圖要傳到我的筆電Macbook Air，到相簿選取好影像後分享，內建的功能就會自動找出附近的裝置，確認傳送給對方，對方看到後按接收，馬上就取得原始影像！

ios-%e8%aa%bf%e6%95%b4html%e4%b8%ad%e5%bd%b1%e5%83%8f%e5%af%ac%e5%ba%a6-adjust-image-width-in-html00004

參考：How to make fit size only for Image in UIWebView?。

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

在下方填入你的資料或按右方圖示以社群網站登入：

Gravatar
WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 ( 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 ( 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 ( 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 ( 登出 /  變更 )

取消

連結到 %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

標籤雲

%d 位部落客按了讚：