css - 如何在 Angular 5 元素中使用 CSS 更改具有旋转图像的父 div 的样式？

Question

我正在构建一个带有顶部和底部文本的模因。 我需要旋转图像，所以我使用 transform: rotate(90deg); 完成了它，但它与父级的 div 重叠，如下例所示。

h1 {
  margin-top: 100px;
}

.parent {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  background: #777;
}

.parent .rotate {
  transform: rotate(90deg);
  width: 100px;
}

.parent h4 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  z-index: 1;
}

.parent .top {
  top: 10px;
}

.parent .bottom {
  bottom: 10px;
}

<div class="parent">
  <h4 class="top">Top Text</h4>
  <img class="rotate" src="http://2.bp.blogspot.com/-7uOyzdXhG2Y/UVpJUbwqGzI/AAAAAAAAAo0/35w5N8tPvHE/s640/iphone-5-hd-wallpapers-hd-41664-tpmw7.jpg" />
  <h4 class="bottom">Bottom Text</h4>
</div>

如何更改父 div 的样式以匹配旋转图像的位置和大小？

Answer 1

首先，我们需要将 div 的 height 更改为与 width 相同。

我们可以做到

.parent{
  background-color: red;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  position: relative; /* If you want text inside of it */
}

其次，我们需要在其中添加一个 div，它具有 absolute 位置及其全宽和全高。

我们可以使用 flex 使图像在 absolute div 中居中。

这是一个工作代码。

h1 {
  margin-top: 100px;
}

.container {
  display: inline-block;
  width: 300px;
}

.parent {
  border: 1px solid black;
  display: inline-block;
  position: relative;
  background: #777;
  width: 100%;
  padding-top: 100%;
  position: relative;
}

.p-absolute {
  bottom: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-top: auto;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.parent .rotate {
  transform: rotate(90deg);
  max-width: 100%;
  max-height: 100%;
}

.parent h4 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  z-index: 1;
}

.parent .top {
  top: 10px;
}

.parent .bottom {
  bottom: 10px;
}

<div class="container">
  <div class="parent">
    <h4 class="top">Top Text</h4>
    <div class="p-absolute">
      <img class="rotate" src="http://2.bp.blogspot.com/-7uOyzdXhG2Y/UVpJUbwqGzI/AAAAAAAAAo0/35w5N8tPvHE/s640/iphone-5-hd-wallpapers-hd-41664-tpmw7.jpg" />  
    </div>
    <h4 class="bottom">Bottom Text</h4>
  </div>
</div>