【Vaadin】利用CSS解決Image元件無法設置最大、最小寬高

目標

• Image可切換不同大小的圖片
• 但Image寬度最大值為320px
• 若Image寬度小於320px，則不強迫寬度放大為320px

測試環境

• Vaadin 7
• Java 8

解說

1. Image本身沒有提供API用來設定最大、最小寬高
• min-width
• max-width
• min-height
• max-height
  
  
2. Image在畫面上生成後，並不會回傳寬高資料回server
• Image在attach前，根本取不到寬高
• Image attach或者畫面attach後，完全無法取得Image的寬高資料，都是 "-1"
  
  
3. 既然無法取得寬高，也就無法動態調整Image的寬高
   
   
4. 用Javascript也無法解決這個問題，不管是sync或async (setTimeout)
• Vaadin本身有提供sync的方法：JavaScript.getCurrent().execute()
• 這兩個寫法都無法順利取到Image寬高，怎麼取都是0
  
  
5. 解決辦法：CSS
• 既然Java (Vaadin)、Javascript都不行，那Spicy試著往更底層的地方找解法，最後腦筋就動到了CSS
• Vaadin元件本身皆有提供設定id或新增CSS class的功能- addStyleName
• 利用上述方式找到Image的CSS，於style.css中針對該元件做最大、最小寬高設定
  
  
6. 範例
   

   .test-window img {
        max-width: 320px;
   }

參考資料

• Vaadin Image API