缩放 div 以使其始终保持纵横比并居中

Question

我的英语不好，所以我解释得不够好，但是这里是an example[404]

在示例中，如果您调整 window 的大小，div.main 的背景图像将始终根据其比例 (1280*752) 调整大小。如果我知道如何使 div 以与其背景相同的方式调整大小，那就太完美了。

这个问题几乎有相同的东西-Vertically center image on page and maintain aspect ratio on resize，但是：
1.我希望<div>灵活，而不是<img>,
2. 在answer to this question中你可以看到实际图像确实保持比例，但<img>容器本身没有。

有没有办法让 <div> 只用 CSS 保持图像的纵横比？不管是背景图还是单独的<img>?

HTML5,CSS首选3种方法

Answer 1

你需要尝试补偿身高。

要做到这一点，我们需要一个填充百分比，所以我们将 image 的 width 减去它的高度，得到 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 2

<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 3

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

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 模型或 table-layout 或 pseudo element and inline-block properties。还有绝对和负边距或翻译技术。

缩放 div 以使其始终保持纵横比并居中

Scale div so that it always keeps its aspect ratio and stays centered

html

image

css

aspect-ratio