制作一个高于宽度的响应式矩形，其中心内容为

Question

对于我的网站，我想制作一个响应的矩形，我可以轻松调整高度和宽度。我试图转动矩形但是当我这样做时，内容也会转90度。也许你可以帮助我？

已经非常感谢

代码段：

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  transform: rotate(-90deg);    
}
.project-pill::after{
  content: "";
  display: block;
  padding-bottom: 80%;
}
.project-pill .content{
  position: absolute;
}

<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">

        </div>
    </div>
</div>

Answer 1

如果我理解正确，你只需要一个比更宽的盒子，更正确吗？

如果是，正如评论中所说，有一种简单的方法，只需将高度设置为大于宽度：

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  height: 200px;
}

.project-pill .content{
  position: absolute;
}

.wrapper-project{
  position: absolute;
  width: 50%;
  height: 50%;
}

<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">

        </div>
    </div>
</div>

或者，用你的方式和解旋内容:(但我真的不明白为什么你需要旋转它）

.project-pill{
  border: 5px solid red;
  position: relative;
  text-align: center;
  width: 35%;
  transform: rotate(-90deg);    
}
.project-pill::after{
  content: "";
  display: block;
  padding-bottom: 80%;  
}
.project-pill .content{
  position: absolute;
  transform: rotate(90deg);   
}

<div class="wrapper-project">
    <div class="project-pill">
        <div class="content">
Hello
        </div>
    </div>
</div>

Answer 2

制作响应式矩形/正方形的正确方法是使用padding-top属性。

*If your code is responsive it can not be a fixed height*

矩形宽度将基于父宽度，高度为父宽度的150％。

查看代码：

＆＃13;

＆＃13;

.rec{
  position: relative;
  background: red;
  width: 100%;
  padding-top: 150%;
}

.content{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

＆＃13;

<div class="rec">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem rerum illo delectus laborum reiciendis atque et aperiam vitae, vel alias quia cum eaque corrupti. Ad tenetur consectetur perferendis consequatur illum?</div>
</div>

＆＃13;

＆＃13;

＆＃13;