CSSでパネルやフォームのコンテンツの大きさを画面サイズに従って自動で変更させるには、、、

Question

CSSフレームワークで提供されているパネルとかフォームのサイズの自動調節のやりかたにいつも困っています。
特にimage_tagで表示している画像とかのサイズには毎度手こずりまして・・・
僕の自動調節に対する疑問をどうか解消してください！おねがいします

①まず横幅とか高さを調節するのってheightとかwidthですよね？
こちらをautoにしても、何に対しての自動調節を行っているのかよくわかっていなかったりします、、、（画面幅？それとも親要素に対して？それとも内蔵している子要素に対して？）
そのへんがわかってないせいなのか、そもそもやり方が正しくないのか、設定してもまったく大きさが変わらなかったりすることが多々ありまして、非常に難儀しています。

②railsの「image_tag」で呼び出された画像はCSSでは大きさの調節できなかったりしますか？いつも「:size」でなんとかしていたのと、「image_tag サイズ指定 自動」などと検索してもHTMLの「<img>」についての記事とか「:size」で数値を主導していする方法しか出てこなかったため、、、

Answer 1

railsのことはよく分からないのですが、要するにimg要素のサイズを画面の横幅に応じて自動的に伸縮する状態にするにはどうしたら良いか？という意味の質門ということでよろしいでしょうか？（違ったらすみません）

img要素を画面サイズに応じて自動的に伸縮するようにするためには、

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

このようにCSSを設定します。この場合、img要素の本来の幅が1000px、その親要素のサイズが800pxだとすると、
親要素のサイズを最大としてその幅に合わせて画像のサイズが縮小される状態となります。
height:auto;を入れるのは、その際に画像の比率が微妙に変わってしまうバグを回避するための措置です。

なお、この方法の場合、親要素が画像自身よりも大きくなった場合には、画像自身のサイズ以上に拡大されることはありません。
もし、親要素のサイズに合わせてどこまでも拡大・縮小するようにしたいのであれば、

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

になります。

ちなみにimg要素にwidth: auto; を入れた場合、画像自身の物理的なpxサイズでそのまま表示されるだけなので、画面サイズを変えても画像サイズは何も変化しません。
img要素のwidthに%の単位をつけた場合には、基準となるのは親要素のwidth（厳密には親要素のcontent-boxの幅）です。ただし、img直近の親要素がdisplay:inline;だった場合には、inline以外が指定された先祖要素まで遡って基準とするようです。

rails環境のことが分からないので疑問にお答えできているかわかりませんが、
とりあえずCSS側の仕様はこのようになっています。
参考までに・・・・