Question

编辑：尝试重新编写问题，以便正确理解问题

我有一个div元素，其中有一个视频元素。 div元素可以调整大小。视频元素也需要调整大小，但它也需要保持原始的宽高比。

.container {
  background: #ff9;
  height: 150px;
  width: 100px;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
}

.fixedsize{
  background: #9f9;
}

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

所以我需要，这里的视频元素水平和垂直居中，而不会失去它的纵横比。

.container {
  background: #ff9;
  height: 400px;
  width: 1000px;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
}

.fixedsize {
  background: #9f9;
}

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

在这种情况下，我希望视频垂直拉伸然后水平居中。

容器宽度大于视频宽度的类似情况;我希望视频水平拉伸并垂直居中。

这只能用css吗？

Answer 1

设置为max-width的

max-height和100%将强制元素保持小于其父级。该对象与将块元素居中的通常相同。

＆＃13;

.container {
  background: #ff9;
  height: 150px;
  width: 100px;
  //overflow: hidden;
}

.subcontainer {
  background: #9ff;
  min-width: 100%;
  min-height: 100%;
  margin: 5px;
  //overflow: hidden;
  position: relative;
}

.fixedsize{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  background: #9f9;
}

＆＃13;

<div class="container">
  <div class="subcontainer">
    <video class="fixedsize" src="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy-hd.mp4" poster="https://media.giphy.com/media/3ohryjnGyiSRrGWKn6/giphy_s.gif" autoplay="" loop="" playsinline=""></video>
  </div>
</div>

＆＃13;

中心/中间对齐元素大于容器

1 个答案: