相关疑难解决方法(0)

如何缩放div以适合浏览器视图端口,但保留div的宽高比.我怎么能用CSS和/或JQuery做到这一点？

谢谢!

我有一个div保持纵横比的元素：它根据其宽度（使用填充技巧）计算其高度。我想要做的是div通过适应最大可用空间，垂直和水平，不裁剪，将其放入另一个。我认为最接近我想要的东西是object-fit: contain- 这img只是。

我希望 div 在保持纵横比的同时覆盖可能的最大高度和宽度。没有垂直或水平裁剪。

甚至可以仅使用 CSS 吗？如果是这样，如何？

更新：一篇很好的文章，目前的情况。

代码（可以是任何其他解决方案，不必基于此代码段构建）：

html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  width: 100%;
}

.container:before {
  content: "";
  display: block;
  width: 50%;
  padding-top: 50%;
}

.embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
}

<div class="container">
  <div class="embed">
    this should accommodate all the available space and …

我希望有一个 div 部分，在保持比例的同时尽可能地填充其 div 父级。

渲染结果将是这样的：

到目前为止我所做的：

html,
body {
  height: 100%;
}

.parent {
  /* Parent's height and width are unknown,
     it could be dynamic, e.g. parent is part of a flex layout. */
  height: 80%;
  width: 90%;
  border-style: solid;
  border-width: 2px;
  border-color: black;
}

.child {
  width: 90vw;
  /* 90% of viewport vidth */
  height: 50.625vw;
  /* ratio = 9/16 * 90 = 50.625 */
  max-height: 90vh;
  max-width: 160vh;
  /* 16/9 * 90 = 160 */
  margin: auto; …

问题很简单:

• 我的页面的主要部分是一个正方形,应该以所有屏幕尺寸和方向显示在屏幕的中央
• 正方形应该有效地使用屏幕并且尽可能大而不需要滚动
• 没有滚动条,没有固定大小,没有溢出隐藏,没有Javascript.
• 鼓励Flexbox.

这是页面在横向或纵向浏览器中的外观:

这是一个CodePen作为起点.

<div class="body">
  <div class="square">
    Square
  </div>
</div>

我试图让div屏幕居中。这个 div 应该有一个特定的width和height当它适合可用的窗口空间时，但是当可用的窗口空间不够时，它应该缩小以适合，但同时保持其原始的宽高比。

我一直在研究许多适用于减小 的示例width，但没有一个适用于同时适用于窗口大小width和变化的示例。height

这是我当前的 CSS：

* {
    border: 0;
    padding: 0;
    margin: 0;
}
.stage_wrapper {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: gray;
}
.stage {
    width: 960px;
    height: 540px;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: chocolate;
    object-fit: contain; /* I know this is for images, it's an example of what I'm looking for */
}

而且，我当前的 …

我正在寻找一种 CSS 方式来嵌入响应式视频 (iframe)，以便其高度始终为窗口的 100%，并且宽度适应任何比例允许的情况。我在这个问题上所能找到的只是相反的（这种技术的变体）。

所以理想情况下会是这样

.videoContainer {
  height: 100%; 
  width: auto;
  max-width: 90%; // Bonus : I need the video not to be 100% width 
  display: inline-block;
  position: relative;
}

.videoContainer::after {
  padding-top: 56.25%; 
  display: block;
  content: '';
}

.videoContainer>iframe{
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
}  

我不确定这是否可能。最好没有JS。

标题说了大部分。我的html：

<div class="wrap">
 <div class="s-inner">
  <figure>
   <img>
  </figure>
 </div>
</div>

CSS：

.wrap{
 max-width:500px;
 max-height:200px;
 background:red;
 }
.s-inner{
position: relative;
margin: inherit;
padding:inherit;
display: -webkit-flex;
display: flex;
max-height: 100%;
max-width: 100%;
box-sizing:inherit;
margin:auto;
}
/*            Inside             */
.s-inner > figure{
  display: block;
  margin: 0 auto 0 auto;
  box-sizing: border-box;
}
  .s-inner > figure > img{
    box-sizing: border-box;
    max-width: 100%;
    max-height: 100%;
}

如果您检查 .wrap div，您会注意到图像弹出并大于 div，如何修复图像以缩放 .wrap div 大小。小提琴