Question

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

在示例中，如果您调整窗口大小，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，首选CSS3方法

Answer 1

你需要尝试补偿身高。

为了做到这一点，我们需要一个填充百分比，所以我们潜入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 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

你可以使用伪元素和垂直填充来保持盒子的比例宽度/高度仅基于其宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

对于框的垂直位置，您可以使用flex模型或table-layout或pseudo element and inline-block properties。还有绝对和负边际或翻译技术。

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

3 个答案: