windowサイズの取得しtransformを制御する方法

http://kate.theroar.nl/

上記サイトの以下の画像の部分のように、ウィンドウサイズを縮小、
拡大するたびにwindowサイズを取得し
transform: translateやscaleを使って
文字や画像のサイズや位置を変更させるにはどのように
コードを書けばいいのでしょうか。

教えていただけますと大変ありがたいです。

m.ts10806

2019/12/10 20:56

目の前に動いているコードがあるならそれを追ってみれば良いかと。 https://ascii.jp/elem/000/000/999/999122/

yambejp

2019/12/11 05:30

具体的なテスト素材とそれをどう表現したいのか手書きの画像でいいので図示してください

takumi1113

2019/12/11 07:06

yambejp様ご返答ありがとうございます。図示の方させていただきました。汚く申し訳ございませ、、 windowサイズに応じて、縦横比を維持してscaleで画像やテキストを縮ませると同時に translateで左上に動いていくようにしたいです。

m.ts10806

2019/12/11 07:07

これは質問ではなく作業依頼です。

行動規範の内容に同意します

回答1件

svgで処理するほうがよいかもしれませんね

テキストとイメージで処理するならこんな感じから

CSS
1<style>
2.imgs{
3position:relative;
4}
5.imgs img{
6position:absolute;
7}
8</style>
9<div class="text">
10test test test test test test<br>
11test test test test test test<br>
12test test test test test test<br>
13test test test test test test<br>
14test test test test test test<br>
15</div>
16<div class="imgs">
17<img src="https://placehold.jp/0000ff/ffff00/660x450.png?text=img1" width="660" height="450">
18<img src="https://placehold.jp/ff0000/00ffff/384x482.png?text=img2" width="384" height="482" style="left:400px;top:100px;">
19</div>
20

上記、テキストと画像をどういう位置関係で処理していきたいのかを
説明してほしいです

ちなみに命題は３枚の絵を使っていますが、説明文では２枚になっていたので
ソースは２枚バージョンにしてあります

投稿2019/12/11 07:26

yambejp

総合スコア116661

takumi1113

2019/12/11 07:46

テキストと画像は命題のように元の高さ関係は維持し、そのままwindowサイズを取得し、translateでテキストも画像も左上に動いていくように位置を変化させていきたいです。その際に、scaleでテキストや画像の縦横比を維持しながら縮めるといううことをjavascriptで制御したいのですが、すみません説明が下手くそになってしまって、、