takahashi
takahashi copied to clipboard
tokiwoousaka
画像の高さが上手く伸縮されないCSS上の問題
親divの高さを正しく指定した上で
height: 90%;
width: auto; //あっても無くても表示かわんないっぽい
に効果なし。 想定より大きく表示されdivからはみ出して表示される。
なお、幅基準での伸縮はこの方法で問題なく表示されているもよう。
再現スライド
http://tokiwoousaka.github.io/takahashi/contents/Bug01.html
１ページ目が再現
２ページ目は苦肉の策（横長の画像を用意して幅で伸縮）
https://twitter.com/trinity_site/status/593457918160154624
Heightを%指定しているのが原因？仕様ありとは？ pxでは意図したスライドには出来ないため単位の切り替えでは対応できないものの、有力な情報。
んー? たとえば
height : 70%;
とかにすればこれ、解決しない? ちょっと意図がまだ良くわからないので。解決策かしらんけど。
NobukazuHanada
いあ、heightの値を小さくした所でブラウザサイズを一定より縮めると同様の崩れが発生するようです。 （大概試したと思うのですがちょっと記憶が古いので今日明日中には再検証します）
ncaq
うーん、コンテンツなのでとか、今後背景画像の設定を追加する可能性も否定できないとかの理由で、できるだけimageタグで解決したいですが・・・やはりそれしか無いんですかね・・。
んー、こっちもUbuntuのChoromiumなので表示は同じになっていると思うんだよなぁ・・・
画像を縦方向に縮めた時に画像と下divの比率が維持できなくなるのです。
いろいろググってわかったこと：
-
widthをパーセント指定で使う場合はよさそう :ok_woman: -
heightをパーセント指定で使うときは親要素をピクセルで指定しない限りへんなことになる（親の高さというより要素自体のサイズに依存？）、ので :no_good: -
vhという単位を使えば画面の高さの割合でheightを指定できるのでちょっと違うけどこれを使うのはどうか（提案）
こういうHTMLの場合、
<div id="parent">
<div id="child1">
<div id="child2">
</div>
</div>
</div>
こうではなく
#parent
{
height: 50%;
}
#child1
{
height: 100%;
}
#child2
{
height: 90%;
}
こんな感じ
#parent
{
height: 50vh;
}
#child1
{
height: 50vh; /* 親の100%の高さ、つまりvhだと同じ */
}
#child2
{
height: 45vh; /* 親の90%の高さ、つまり50vhの90%の45vh */
}
今のとこ一番実現可能性がある方法かもしれない。有益な情報ありがとう。（対応ブラウザが減る？知らん！）
で、どうやるか
指定する値が親要素ではなく対viewportなので単純な書き換えによる対応ができるわけではない。
力技でも良いなら
https://github.com/tokiwoousaka/takahashi/blob/master/src/Control/Monad/Takahashi/Slide.hs#L55
この辺で出来上がったHtml型のデータ掘り返して再帰的に現在の親要素のHeightを検出しつつ、Image要素を見つけたらスタイルを構成しなおす事で解決はしそうなんだけど、本来の意味でImage要素のheightを指定したい場合に破綻する。
一番堅実な方法は
https://github.com/tokiwoousaka/takahashi/blob/master/src/Control/Monad/Takahashi/HtmlBuilder/Style.hs#L47
にvhやvwに加え、「親要素の大きさを加味したパーセンテージからvw、vh値を指定出来るコンストラクタ」を追加し、実際にそのように指定できるようにする路線が一番マシそう。
Style型がスタイルシートの仕様に直接対応している必要とか特に無いけど、やっぱりスタイリッシュでは無いし、なんか後々つらみを生み出すバクダンになりそうな予感はあるけど、まぁ、妥協点って感じかなぁ。
ちなみにこれを素のままやると、「最適化していないHtml型をStringに変換する際に困ったことになる」という問題があるので、単純に追加してごにょごにょするだけじゃなくて、色々工夫して良い感じに型安全を維持する必要があって、ややめんどい。
問題を理解できてないかもしれないですが、親要素に position: relative; つけて img 要素を以下のようにするのはどうでしょうか？
一つのセルに必ず一つの img 要素しか入らないという前提が必要ですが。
position: absolute;
top: 0;
left: 0;
bottom: 0;
right; 0;
margin: auto;
ktsnさん
原理がよく解ってないのですが、その状態でheightを%指定したら綺麗に表示されましたΣ(´∀｀；)
ありがとうございます！ あれ……解決？ ありがとうございます！！ ……あれ？
詳細な仕様は僕も把握してないですが、table は子孫要素の大きさを見て自身の大きさを決めてるので、子孫要素で % 指定してしまうとうまく動かない時がよくあります。
top: 0; とか margin: auto; は縦横中央揃えさせてるだけです。
例えば、上にくっつけたければ bottom: 0; を消せば良いです。
(以下は経験則からの推測が混じってます)
position: absolute; すると、その要素は table の大きさを決めるときに使われなくなるので、table 部分が意図した大きさでレンダリングされるようになります。
その後に、img 要素が table-cell の大きさから自身の大きさを決めるのでうまく動くようになるのだと思います。