Question

我有一个div，其背景图片大小为1170px x 929px。当我调整宽度，即缩小宽度时，我希望高度也缩小，以保持纵横比。有人可以解释如何使用CSS完成此操作吗？到目前为止我所有的都是以下

<section class="box">
            <article class="container ">
                <div class="content margin_tp_80 margin_bm_40 map_london">
                </div>
            </article>
        </section>

任何帮助都会非常感谢。

Answer 1

这可能是您正在寻找的，宽度和高度始终保持相同的比率

＆＃13;

.box{
  position: relative;
	width: 100%; //width of your background image
  }
 .box:before{
  content: "";
	display: block;
	padding-top: 79.4%; //the ration (929/1170)*100
  }
  .container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: #f1f1f1;
}

＆＃13;

<section class="box">
      <article class="container">     
          <div class="content margin_tp_80 margin_bm_40 map_london">
          </div>
      </article>
</section>

＆＃13;

Answer 2

Bootstrap有一个类可以帮到你。

$("#CountryCode").on('change', function(){

      $.ajax({
            url: 'controller action url here'
            type: "POST",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({ Id: $("#CountryCode").val()}),
            cache: false,
            async: true,
            success: function(data) {
                //now u have data. set it where and as u want
            },
            error: function() {
                //your exceptional handler
            }
       });
});

如何调整Div和＆amp;保持宽高比

2 个答案: