让正方形div始终填满父元素并保持其宽高比的方法

Question

假设我有以下HTML代码：

<div class="parent">
  <div class="square-child"></div>
</div>

我想实现的目标是让square-child填满其父容器，而不会失去比例，并且始终保持居中。我已经画了一个示意图，其中square-child以红色显示，parent以绿色显示。

我正在阅读以下SO问题，但无法使其居中：使用CSS保持div的宽高比 编辑：添加了fiddle https://jsfiddle.net/2bg1jzg3/2

- Mads K

---

你已经链接了正确的答案；看起来当前的问题是如何水平和垂直居中一个元素？ - feeela

如果父元素的大小相对于视口，则您可以在此处找到答案：根据宽度和高度适应响应式正方形以适应视口。否则，您需要使用JS计算子元素的大小。 - web-tiki

@MadsK 你好像有点混淆了，你使用了 background-size:contain; 的正确方法 https://jsfiddle.net/2bg1jzg3/3/ - web-tiki

@MadsK，你不需要与你在问题中链接的填充技术有关的任何东西。background-size:contain;已经内置了该功能。http://jsfiddle.net/2bg1jzg3/4/ - web-tiki

抱歉如果我表达不清楚。我试图通过使用background-size:cover; background-position:center;来使其成为正方形，以便“裁剪”背景图片。 - Mads K

Answer 1

也许这个会有所帮助： http://jsfiddle.net/2bg1jzg3/5/

$(".visual").animate({
    width: "600px",
    height: "300px"
}, 2000, function () {
    // Animation complete.
});

.visual {
    background-color:lightblue;
    position:absolute;
    overflow:hidden;
    width:250px;
    height:600px;
}
.parent {
    width:auto;
    height:100% !important;
    position: relative;
    display: block;
}
.parent .square-child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center;
    background-image: url('http://lorempixel.com/output/abstract-q-g-850-480-8.jpg');
    width: 50%;
    height: 0;
    padding-bottom: 50%;
    margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="visual">
    <div class="parent">
        <div class="square-child"></div>
    </div>
</div>

- Bojan Petkovski

---

很酷，但是正方形不适合，因为你定义了它的宽度为50% :( - Mads K

我猜纵横比和宽度可以用JavaScript完成，然后就可以工作了 :) - Bojan Petkovski

没错。我想我必须使用JS。 - Mads K

Answer 2

试试这个Fiddle.

<div class="parent">
  <div class="square-child"></div>
</div>

CSS

.parent{
    width: 100%;
    background: #f00;   
    height: 100px;
}
.square-child{
    width: 50%;
    margin: 0 auto;
    background: #00FF63;
    height: 100%;
}

- stanze