如何调整Div和&保持宽高比

时间:2017-03-29 10:31:45

标签: html css

我有一个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>

任何帮助都会非常感谢。

2 个答案:

答案 0 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 1 :(得分:0)

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
            }
       });
});