6步驟-wlw動作小小換一下,輕鬆寫出圖片會自動符合螢幕大小的文章(設定一次即可喔!)

1.下載 Polaroid Picture

下載連結

2.安裝 Polaroid Picture

下載後點擊兩下安裝程式

3.用Polaroid Picture上傳第一張圖片

安裝完成後開啟 windows live writer

點選Polaroid Picture 插入第一張圖片

4.借用 Polaroid Picture的預設,做一點小小的修改

這時候有沒有發現,圖片超過了文章的版面大小,先別急著調整,我們要work smart 做一個一次性的小小調整.

點選Option

點選Advanced

將大小改成100

將下面的格子內容改為

class=”c100imglink”

5.文章上面貼上一段小小css代碼.

 

代碼如下:(直接複製上去即可)

<style>
.c100imglink_img{
width:100%;
}
.c100imglink img{
display:block;
width:90%;
margin-left:auto;
margin-right:auto;
}

.c100imglink:hover img{
display:block;
width:100%;
margin-left:auto;
margin-right:auto;
}
</style>

6.來看看效果吧

桌上型電腦windows live writer 預覽所看到的畫面

上傳文章後桌上型電腦chrome中所看到的畫面

上傳文章後  手機(直版)瀏覽器中所看到的畫面

上傳文章後  手機(橫版)瀏覽器中所看到的畫面

1 comment for “6步驟-wlw動作小小換一下,輕鬆寫出圖片會自動符合螢幕大小的文章(設定一次即可喔!)

  1. blake
    2015-02-12 at 16:45:53

    將大小改成100

    將下面的格子內容改為

    建議加上項目名稱,看圖片有點糊,class=”c100imglink”

    另外,size 原來是可以調的 建議加上圖片

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *