jqueryをつかって幅と高さをそろえる方法について

前提・実現したいこと

jqueryでcssの高さと幅を同じにさせたいです。
現在bootstrapを使って横幅を指定しているため、画面の大きさによって横幅が変化してしまいます。
そこでjquerytを使って幅を取得したのちに、その数値を高さに適応したいと考えています。

しかし、横幅を取得し、それを高さに代入しようとしたところ、変更が適用されません。
またデベロッパーツールを開いてもエラーメッセージは出ていません。
素人質問で申し訳ないのですがよろしくお願いします。

該当のソースコード

WPを使用しているため,$がjQueryに置き換わっています。

javascript
1jQuery( function() {
2	
3 jQuery('#policy1').css('height', function(){
4	 jQuery('#policy1').width();
5 } );
6});
7
8});
9

html
1<html>
2  <body>
3    <div class="container-fluid">
4      <div class="row text-center policy-1-wrapper">
5        <div id="policy1"  class="col-md-12 col-lg-3 col-xl-3">
6
7        </div>
8　    </div>
9    </div>
10  </body>
11</html>
12

css
1#policy1 {
2  background-color: pink;
3  border-radius: 50%;
4  height: 354px;
5  margin: 0 auto;
6}

yasutomi

2019/08/24 11:13

コードが汚く間違っているため正しく書き直してください。 div class="container-fluid"> <div class="row text-center policy-1-wrapper"> <div id="policy1" class="col-md-12 col-lg-3 col-xl-3"> </div>

135

2019/08/24 11:23

申し訳ありません。今修正します。

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

回答2件

ベストアンサー

なぜかベストアンサーになっていたが
どちらかというとこっちが正しいと思うので別解。

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
2<style>
3#policy1 {
4  background-color: pink;
5  border-radius: 50%;
6  margin: 0 auto;
7}
8</style>
9<div class="container-fluid">
10  <div class="row text-center policy-1-wrapper">
11    <div id="policy1" class="col-md-12 col-lg-3 col-xl-3">
12      SAMPLE
13    </div>
14  </div>
15</div>
16<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
17<script>
18$(window).on('load resize', function() {
19  $('#policy1').css('height', $('#policy1').width());
20});
21</script>

投稿2019/08/24 11:47

yasutomi

総合スコア2937

135

2019/08/24 12:15

前の回答の方で、<div class="row... を削除せずに、widthとheightを入れ替えて書いたところ、うまくいったのでそれをベストアンサーにしてました。しかし、ちょうど、、画面の大きさが変わると意図しないように動いたので困っていたところでした。これで画面の大きさが変化してもちゃんと動くようになりました。ありがとうございました。

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

bootstrapのclass="row"があるとdisplay: flexになって
widthが効かなくなるため、これを削除して以下のようにしないと実装できないです。

html
1<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
2<div class="container-fluid">
3  <div class="text-center policy-1-wrapper">
4    <div id="policy1" class="col-md-12 col-lg-3 col-xl-3">
5      SAMPLE
6    </div>
7  </div>
8</div>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
10<script>
11$('#policy1')
12  .css({
13    'width': $('#policy1').height(),
14    'max-width': $('#policy1').height()
15  });
16</script>