JavaScript、jQuery、CSS)ポップアップ写真画像をブラウザのウインドウサイズに合わせて拡大縮小できるようにした。晴れた日は外に出て歩き、雨の日は部屋で絵を描く2019-09-02JavaScript、jQuery、CSS)ポップアップ写真画像をブラウザのウインドウサイズに合わせて拡大縮小できるようにした。写真・カメラ以前、HTMLで写真サムネイルアルバム+ポップアップ画像ページを作成した。下はその時のブログ記事。作成したサムネイルアルバムWebページは、以下。https://ok2nd.sakura.ne.jp/album/kobe1-v.htmlこのWebページのサムネイル画像をクリックすると、ポップアップ的に1枚の写真が拡大されたページを表示する。このポップアップページは、ウインドウの横幅のリサイズに合わせて写真画像がリサイズするようになっていたが、縦の高さのリサイズには対応していなかった。(現在の上のページは対応済みになっている。)≪縦高のリサイズに対応していない版≫https://ok2nd.sakura.ne.jp/album/photo-v01.php?photo=kobe1/800/20170929143935.jpg今回、このポップアップ画像ページの写真をウインドウの縦方向のリサイズにも合わせて拡大縮小できるようにした。ボックスの高さをブラウザの高さに合わせる基本的な手段】まず、基本的な事。100%;"で簡単にできるが、高さを合わせるのは簡単ではない。100%;"で解決するわけではない。100vh;}としないといけない。縦の高さはウインドウに対してパーセント指定ではなく、ウインドウの高さから一定のピクセル値を引いたサイズにしたかったので、各ボックスのheightを100%にした上で、JavaScriptを使って親ボックスの高さを変える事にした。60);}</script>しかし、この方法では、ウインドウの縦横比率が写真画像の縦横比率に比べて縦長の場合に、縦方向に間延びした画像になってしまう。上記の問題をクリアするために、ウインドウと写真画像の縦横比率の比較をして、縦長の場合には、親ボックスも含めて、各ボックスの高さ(height)を全てautoにするようにした。写真の高さをウインドウの高さに合わせる。Plusの液晶が壊れたので、スマホを購入し直した。...2019-02-17影付き枠+ビネット効果付き写真サムネイルアルバムのポップアップ拡大画像にビネット効果。影付き枠+ビネット効果を使った写真のWebサムネイルアル...2019-02-17影付き枠+ビネット効果付き写真サムネイルアルバムにポップアップ拡大画像を追加。らかい油性色鉛筆が好きなら、プリズマカラーがおすすめ。めぐりシンプルなHTMLカレンダー。PHPコードサンプル。マップ」をGoogleマップのマイプレイスで作成。影付き枠+ビネット効果を使った写真のサムネイルアルバムのポップアップ拡大画像にビネット効果。(1)月別アーカイブはてなブログをはじめよう!art2ndさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。