Question

高度，但宽度必须固定，高度也是如此，因此不起作用。

img里面占据它的全宽，高度为：9，并且即使流体div发生变化也继续保持。

PS：如果可能，我需要纯CSS基础的答案。

Answer 1

如果您的div的高度和宽度为16：9宽高比，那么您所要做的就是：

＆＃13;

$('.container').height($(this).width()*9/16);
$( window ).resize(function() { $('.container').height($(this).width()*9/16); });

＆＃13;

.container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: black;
}
.container img {
  width: 100%;
  object-position: center;
  object-fit: contain;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

设置position: relative;会通知浏览器操纵相对于div的子项。
将高度和宽度设置为100％将拉伸图像以适合div。
关于object-fit：https://www.w3.org/TR/css3-images/#object-fit
如果您想要裁剪图像以适合div，那么object-fit: cover;将非常有用。
如果拉伸不成问题，那么你根本不需要物体位置和物体贴合属性。

Answer 2

img{
  width:100%;
  max-width:100%;
  height:auto;
}

Answer 3

如果你不知道div的宽度，因为它是流动的。您可以使用padding-bottom属性来指定相对于宽度的元素高度：

＆＃13;

.container {
   width: 100%;
   padding-bottom: 56.25%;
   position: relative;
   background: black;
 }

＆＃13;

<div class="container"></div>

＆＃13;

然后，您可以将图像绝对定位在容器的中心内;

＆＃13;

.container {
  position: relative;
  padding-bottom:56.25%;
  background: black;
}
.container img {
  width: 100%;
  position: absolute;   
  top:50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="container">
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

编辑：

position:absolute将img从元素流中拉出，这将使它出现在容器填充的顶部。而不是让图像在其下方出现巨大的填充物。如果没有position:absolute;

，请参阅此示例

＆＃13;

.container {
  position: relative;
  padding-bottom:56.25%;
  background: black;
}
.container img {
  width: 100%;
}

＆＃13;

<div class="container">
  <img src="http://placehold.it/350x150">
</div>

＆＃13;

为了澄清transform，它会偏移图像的top:50%，因为元素的默认原点是左上角的像素。因此，我们使用translateY(-50%)将原点移动到图像的中间，以便top: 50%实际上从图像的中间计算出来。

如何使<div> 1：1的比例？

3 个答案: