Q&A
CSSではなくJavaScriptなんですか？
あとそれだと何も変化しないと思うんですけど･･･
###聞きたいこと
最初CSSによるブラウザの拡大縮小について調べたときtranform: scale()とzoom:の２つがあり、そのうちzoomの方は非標準であり使うべきではない(https://developer.mozilla.org/ja/docs/Web/CSS/zoom)ということがわかりました。
しかしBootstrapのGridSystemにおいて、zoomでしか対応できなさそうな挙動があり、transform:scale()だとどういう風に書けばいいのかわからなかったので質問させていただきます。
###実現したいこと
GridSystemによる画面比を保ったまま縮小したいのですが、transform:scale()だと全体が縮小されてしまい余白が出来てしまうのでそれを防ぎたいです。
元の画面
]
実現したい画面（zoom:0.5を使用）
tranform:scale(0.5)で縮小した画面
###コード
HTML
1<body> 2 <div class = "row"> 3 <div class = "col-6" id = "A">A</div> 4 <div class = "col-6" id = "B">B</div> 5 </div> 6</body> 7
CSS
1.col-6{ 2 text-align:center; 3} 4#A{ 5 background-color:red; 6} 7#B{ 8 background-color:blue; 9} 10 11//以下どちらか 12body{ 13 zoom:0.5; 14} 15body{ 16 transform-origin:left top; 17 transform: scale(0.5); 18} 19
実際の画面とコードは以下のURLに記載しています。
https://jsfiddle.net/3ghmabxq/13/
回答よろしくお願いします。
回答2件
0
ベストアンサー
ご提示のコードの範囲であれば、以下のようなコードでzoom: 0.5っぽくはなると思います。
完全に同じではないだろうとは思いますが……
css
1body{ 2 width:200%; 3 transform: scale(0.5); 4 transform-origin: top left; 5}
投稿2021/08/04 01:26
総合スコア36134
0
これで期待する動きと合致してますでしょうか？
js
1transform: scale(1);
投稿2021/08/03 13:11
総合スコア938
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/04 01:58
2021/08/04 05:16