Question

我正在尝试创建一个＆＃34;幻灯片＆＃34; div以屏幕中间为中心，具有恒定的宽高比。

将此trick组合为中心，将this one组合为比率，我想出了这个：

HTML

<div class="slide">
    <div class="slide-content">
        Percentage sized and still centered.
    </div>
</div>

CSS

/* slide centered in the middle of the screen + width = 80% */
.slide {
    position: fixed;
    width: 80%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: red;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}   

/* aspect ratio of 2:1 */
.slide:before{
    content: "";
    display: block;
    padding-top: 50%;
}

/* stretch the content to the slide size */
.slide > .slide-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 60px;
    transition: all 0.6s ease-in-out;
}

小提琴在这里：https://jsfiddle.net/3jph853w/

它的工作效果非常好，在横向视图中可以在移动设备上使用：诀窍是基于宽度，div没有正确调整大小并且其中的一部分＆＃34;溢出＆＃34;在屏幕外面。当您垂直调整小提琴输出大小时，您可以看到它。

我该如何解决？我宁愿只保留css，还需要额外的html标记。我对JS开放，但我的项目是基于Angular的，不使用jQuery。

Answer 1

将text-align:center;添加到.slide > .slide-content {

的底部

Answer 2

这可能是一个开始

Fiddle demo 100％的视口
Fiddle demo视口的80％

html, body{
  margin: 0;
}
.slide{
  position: absolute;
  width: calc(100vh * 2);
  height: calc(100vw * 0.5);
  max-width: 100vw;
  max-height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.slide-content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  padding: 40px 60px;
  box-sizing: border-box;
  transition: all 0.6s ease-in-out;
}

<div class="slide">
  <div class="slide-content">
    Percentage sized and still centered.
  </div>
</div>

当高度是限制因素时保留div比率

2 个答案: