Question

我可以找到多个半解决方案，但是我正在寻找针对我问题的完整解决方案。我有一个div，我想以固定的宽高比在屏幕中居中，该div本质上应该始终是完全可见的，因此div始终是它可以保持的最大纵横比。无论垂直和水平调整窗口大小。

这里有一个Codepen：https://codepen.io/william-bang/pen/ZjyWRd

我创建的

只能解决水平问题，而不能解决垂直问题。我设法使其正常工作，但大小调整的行为与此不同。我一直在寻找CSS解决方案，尽管我可以使用JS解决方案，但是如果有人绝对确定不存在任何解决方案。

body {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 40%;
  height: 100%;
  margin: auto
}

.img {
  padding-top: 50%;
  width: 100%;
  background: #ccc;
  text-align: center;
}

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

如果有任何建议，我将不胜感激，这让我感到困扰了许多小时。在此先感谢:)

更新，div需要在不同的页面上保持其长宽比，并且始终保持其最大尺寸。

@Grenther感谢您的答复，我尝试修改您给出的答案，使其仅在CSS中完成，而不必使用CSS预处理程序。一切顺利，直到我意识到CSS媒体查询不支持标准CSS变量，否则您提出的方法在没有SCSS的情况下是可能的，但也许您已经知道了。

:root {
  --ogW: 1600;
  --ogH: 900;
  --ratio: calc( var(--ogW) / var(--ogH));
}

 body {
  width: 100%;
  height: 100%;
}

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  @media screen and (max-width: 177vh) {
    width: 90vw; 
    height: calc( 90vw / var(--ratio)); 
  } 

  @media screen and (min-width: 177vh) {
    width: calc( 90vh * var(--ratio));  
    height: 90vh;
  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;
}

<div class="ratio">

  <div class="div">
    
    Hello!
    
  </div>
  
</div>

Answer 1

最终更新：

它变成了SCSS问题，可以使用任何输入来输入可变宽度或高度，如下所示：

http://jsfiddle.net/832v5f0L/41

 $div-width : 1600;
 $div-height : 900;

 $ratio: $div-width / $div-height;

  @media screen and (max-width: (100 * $ratio) + vh) {
    width: 100vw; // always 100vw to fill
    height: (100 / $ratio) + vw; // 100 / ratio
  }

  @media screen and (min-width: (100 * $ratio) + vh) {
    width: (100 * $ratio) + vh;  //100 * ratio
    height: 100vh; // always 100vh to fill
  }

更新的答案：

宽度小于高度时，媒体查询肖像将自动激活。这确保了我们可以使用vh和vw获得最大可能的大小而不会出现溢出。

宽度和高度之间的比例将确保您获得固定的长宽比。

    body {
  width: 100%;
  height: 100%;
}
.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 
100vh * (100 / height) 
with hright 50:
100vh * 100 / 50 = 200vh
*/

@media screen and (max-width: 200vh) {
  .wrapper {
      width: 100vw;
      height: 50vw;
  }
}
@media screen and (min-width: 200vh) {
  .wrapper {
      width: 200vh;
      height: 100vh;
  }
}

.img {
/*   padding-top: 50%; */
  width: 100%;
  height: 100%;
  background: #ccc;
  text-align: center;
  background-img: url()
}

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

更新：最小-最大宽度查询

Answer 2

请参阅以下代码段。调整包装纸宽度时，img会缩放以适合其尺寸，同时保持其宽高比

img还将在.wrapper元素内垂直居中并水平放置

* {
  box-sizing:border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

.wrapper {
  width: 50%;
  height: 100%;
  margin: auto;
  position: relative;
}

.img {
  max-width: 100%;
  max-height: 100%;
  padding:20px 40px;
  background:grey;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: fit-content;
  width: fit-content;
  margin: auto;
  transform: translateY(-50%);
}

.img img {
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

<div class="wrapper">
  <div class="img">
    <img src="https://cdn.pixabay.com/photo/2013/01/29/00/47/search-engine-76519_960_720.png">
  </div>
</div>

Answer 3

这是一个很好的问题，我一直在努力解决，但是在不使用flex的情况下将其调整为垂直高度确实是一项艰巨的任务。

但是@Grenther答案似乎在不使用图像的情况下仍然有效。调整窗口的宽度和高度时，他的1x2比例div保持不变。

然后，我修改了他的代码，以便div上有一个max-height和max-width。我只能以他的200px x 400px的比例来使用它。

如果@Grenther可以更新我的jsfiddle代码真是太棒了，那么无论设置了div size / ratio变量如何，他聪明的vh方法大小都可以使用sass math进行调整这样任何设置的div大小都可以使用。甚至我都在努力查看他的版本如何工作。但是，如果每个vh维的数学代码都在sass代码中，那么我们也许可以理解他的巫术。

@Grenther版本：https://jsfiddle.net/joshmoto/jndmoz6v/

 /* div size vars and div ratio3 */
 $div-width : 400;
 $div-height : 200;

 body {
  width: 100%;
  height: 100%;
}

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* set your div max-size here  */
  max-width: $div-width + px;
  max-height: $div-height + px;

  @media screen and (max-width: 200vh) {
    width: 100vw;
    height: 50vw;

  }

  @media screen and (min-width: 200vh) {
    width: 200vh;
    height: 100vh;

  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;

}

我知道这不是一个无聊的问题，但是我只是在用这个，所以我们可以看到@Grenther的回答逻辑。

我自己尝试了数学运算，但是当我更改div大小/比率时，它的工作方式与他的版本不同。

看到我的失败：https://jsfiddle.net/joshmoto/Lkebpyws/

$div-width : 400;
$div-height : 200;

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* set your div max-size here  */
  max-width: $div-width + px;
  max-height: $div-height + px;

  @media screen and (max-width: $div-height + 'vh') {
    width: ($div-width / 4) + vw;
    height: ($div-height / 4) + vw;

  }

  @media screen and (min-width: $div-height + 'vh') {
    width: ($div-width / 2) + vh;
    height: ($div-height / 2) + vh;

  }

}

...

保持div居中并保持纵横比，并垂直或水平调整尺寸

3 个答案: