标度除法，使它始终保持其纵横比和保持中心。

Question

我的英语不好，所以我解释得不够好，但是这里是一个例子 404

在示例中，如果您调整窗口的大小，div.main的背景图像将始终按照其比率(1280*752)进行调整。如果我知道如何将div调整成与其背景相同的大小，那就太完美了。

这个问题中几乎有同样的东西-- 页面上垂直中心图像，并在调整大小时保持高宽比，但是：

1. 我希望<div>是灵活的，而不是<img>，
2. 在对这个问题的回答中，您可以看到实际图像确实保持了比率，但<img>容器本身却没有。

是否有一种方法可以使<div>只使用CSS来保持图像的高宽比？不管是背景图像还是单独的<img>

HTML5，CSS3方法为首选

Answer 1

<script>
    $(document).ready(function() {
        adjustDivHeight();
        $(window).resize(function() {
            adjustDivHeight();
        });
    });

    function adjustDivHeight() {
        setTimeout(function() {
            var width = $('#div_container_adjustable').width();
            var height = width * 0.5589123;
            $('#div_container_adjustable').height(height);
        }, 300);
    }
</script>
<div id="div_container_adjustable" class="detail_image"></div>

Answer 2

你需要试着补偿身高。

要做到这一点，我们需要一个填充百分比，所以我们降低了width的image的高度，这给你0.5875，这意味着或填充应该是58.75%

确保它是块元素，这样<div>的宽度就可以伸长。

​

.wrapper {
  width: 500px;
}
.yourdiv {
  max-width: 1280px;
  padding-top: 58.75%;
  background-image: url("http://fc03.deviantart.net/fs70/i/2013/297/4/8/conquistadors_ii_by_shutupandwhisper-d6ro3z5.jpg");
  background-size: 100% auto;
  background-position: top left;
  display: block;
  margin: 0;
  /* for show */
  background-color: purple;
}

<div class="wrapper">
  <div class="yourdiv"></div>
</div>

​

Answer 3

您可以使用伪元素和垂直填充来保持框的比率宽度/高度仅基于其宽度。

​

html,body {
  height:100%;
  width:100%;
  margin:0;
  }
div {
  margin:auto;
  display:block;
  width:50%;
  border:solid;
  }
div:before {
  content:'';
  display:inline-block; 
  vertical-align:middle;
  padding-top:60%;
  }

<div>boxe, resize window's width</div>

​

对于框的垂直位置，您可以使用flex模型或表格布局或伪元素和内联块性质。也有绝对和负面的边际或翻译技术。