子が回転しているときに親のdivサイズを変更する
frontEndNoob
その中にブロックラッパーとdivがあります。子にCSS回転を適用し、親divが幅と高さを変更するようにします-子divは常に親の内側にある必要があります（写真のように）。
#wrap {
margin-top: 100px;
width: auto;
height: auto;
position: relative;
border: 1px solid red;
box-sizing: border-box;
}
#div {
position: relative;
top: 0;
left: 0;
background-color: green;
width: 200px;
height: 80px;
display: block;
transform: rotate(120deg);
}<div id="wrap">
<div id="div">123</div>
</div>例：https：//jsfiddle.net/y2mw3wxn/
それがどうあるべきかの例：
Asim KT
この答えから大きくコピーします：
基本的に、あなたtransform（rotateまたはscale他のtransform値）が通常のドキュメントフローに触れていないときは、その要素の外観を変更しているだけです。
だから、あなたの質問に答えるために：
子供が回転しているときに親を調整できますか？いいえ、CSSだけではできません。（知っている人は、私がこれについて間違っているなら、私を訂正してください。）
同じようにJavaScriptを使用する必要があるかもしれません。いくつかの計算を行い、親要素に適用widthしてheightスタイルを設定します。
参照：MDNから：
CSS変換プロパティを使用すると、CSSビジュアルフォーマットモデルの座標空間を変更できます。これを使用すると、設定された値に従って、要素を移動、回転、拡大縮小、および傾斜させることができます。
そして
座標空間を変更することにより、CSS変換は、通常のドキュメントフローを中断することなく、影響を受けるコンテンツの位置と形状を変更します。このガイドでは、変換の使用方法を紹介します。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
- 前の投稿：何も書き込まずにstringstreamの実際の最大サイズを取得するにはどうすればよいですか？
- 次の投稿：インテントURLを使用してAndroidブラウザのプライベートアクティビティを開始する
関連記事
Related 関連記事
- 1
コンテンツが回転したときにdivのサイズを変更する
- 2
子divのサイズが変更されたときに親divのサイズが変更されないようにする
- 3
デバイスが回転したときにtableViewのサイズを変更する
- 4
QGraphicsItemのサイズを変更して回転すると、形状が奇妙になります
- 5
回転変換後にdivのサイズを変更するときに左上の位置を保持するにはどうすればよいですか？
- 6
親の寸法に基づいて回転してからサイズを変更します
- 7
全画面表示でないときに回転時にMPMoviePlayerControllerのビューのサイズを変更する方法
- 8
キャンバスでctx.scale（）メソッドを使用しているときに、fabricjsでサイズ変更と回転が機能しませんか？
- 9
回転した要素のサイズを変更するときに、正しい幅と高さを計算します
- 10
円がy軸で回転しているときに、jqueryanimateを使用して円の色を変更します
- 11
親のサイズ変更divをトリガーするときに、子divのサイズを変更するにはどうすればよいですか？
- 12
bufferedImageを回転すると、画像のサイズが変更されます
- 13
cssを使用して回転半径のサイズを変更する方法
- 14
CSS-divコンテンツが親のサイズを変更しないようにする
- 15
コンポーネント内のDimension.get（ 'window'）。heightをリッスンして、ユーザーが回転したりWebユーザーのサイズを変更したりしたときに、レイアウトがリフローできるようにするにはどうすればよいですか？
- 16
UITextViewの境界を変更しているときに、TextContainerのサイズが変更されない
- 17
デバイスを回転させるときにSKSceneのサイズを変更するにはどうすればよいですか？
- 18
jQueryを使用して親divに関連するdivのサイズを変更する
- 19
UIViewの回転を変更すると、フレームサイズが変更されます。回転後のフレームサイズを維持するにはどうすればよいですか？
- 20
この例では、子の寸法に基づいて親divのサイズを高さに変更するにはどうすればよいですか？
- 21
マウスが子にカーソルを合わせている間、親のサイズ変更を防ぐ
- 22
GNU Octave、インタラクティブウィンドウで回転しているときに3D軸のサイズ変更を停止するにはどうすればよいですか？
- 23
JavaScriptを使用して親divのサイズを変更する方法
- 24
親コンテナのgetWidth / Heightにサイズ変更するときに、javafx長方形が色を表示しないのはなぜですか？
- 25
配給を維持し、画像の高さを尊重して、親divに画像のサイズを変更する
- 26
親ウィジェットのサイズが変更されたときにアスペクト比を維持しながら子ウィジェットのサイズを変更する
- 27
Flutter：子がオーバーフローしたときにスタックのサイズを変更する
- 28
ajaxクエリがサイズ値を変更しているときに入力幅のサイズをアニメーション化する方法
- 29
CSS3を変換する方法：自動的にサイズを変更して回転する
コメントを追加