網站設計筆記: SC 裡面所有的圖片都設為 Responsive 響應式，這個搞了好久，解決方案這麼簡單！

2023年6月27日星期二

先參考這一篇：

https://alfredwebdesign.blogspot.com/2022/06/scriptcase-sccss.html

內容複製如下：

可以在 Application 的 Events 裡面的 onScriptInit 裡面添加 CSS 的定義，就可以修改掉原本 SC的CSS設定，例如：希望將 GRID 的表格底部的訊息隱藏起來，不要出現，可以使用網頁檢查的方式，查到該信息的 ID 為：sc_grid_sumario

那段 html 為：

所以，就可以在 onScriptInit 這個 Event 裡面，這樣改：

?>
<style>
#sc_grid_sumario {
display: none;
}
</style>
<?php

註：

onScriptInit 會加在 <HTML><HEAD>............[加在這裡]</HEAD>

onApplicationInit 會加在 [加在這裡]<HTML<HEAD>............</HEAD>

找到將 img 設為 responsive 的 CSS 為：

img {
    max-width: 100%;
    height: auto;
}

所以，就在 onScriptInit Event 中，加上：

?>
<style>
img {
    max-width: 100%;
    height: auto;
}
</style>
<?php

就這樣，所有的 img 就都可以 responsive 了！

這麼簡單！喔~~~搞了好久！

原本的想法還在想要用 Bootstrap 外部程式庫的方式引入，再來想如何將 class = "img-fluid" 加到該欄位！

網站設計筆記