Angular 5项目中如何用CSS调整含旋转图片的父div样式？

这个问题踩过的人都懂——CSS的transform: rotate()只是给元素做视觉上的旋转，但元素在文档流里占据的空间还是它旋转前的尺寸和位置，所以父容器会按照图片原始的宽高来布局，自然就和旋转后的图片“打架”了。下面给你两种靠谱的解决方案：

方案一：用CSS aspect-ratio 静态适配（现代浏览器友好） #

如果你的表情包图片是固定宽高比的（比如常见的4:3、1:1），直接给父容器设置旋转后的宽高比就行。以你提供的图片为例，原图是640x480（4:3），旋转90度后宽高互换，比例变成3:4。修改后的代码如下：

h1 { margin-top: 100px; }
.parent { 
  border: 1px solid black; 
  display: inline-block; 
  position: relative; 
  background: #777;
  /* 旋转后宽高比为原图的高/宽，这里是480/640=3/4 */
  aspect-ratio: 3/4;
  width: 100px; /* 和旋转图片的目标宽度一致 */
}
.parent .rotate { 
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left; /* 把旋转原点设为左上角 */
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.parent h4 { 
  position: absolute; 
  left: 0; 
  right: 0; 
  text-align: center; 
  color: white; 
  z-index: 1;
  margin: 0; /* 去掉默认margin避免文字偏移 */
}
.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>

关键调整点： #

• aspect-ratio:3/4：让父容器的宽高比匹配旋转后图片的视觉尺寸
• transform-origin: top left + translate(0, -100%)：解决旋转后图片偏移的问题，让它刚好填满父容器，不会超出

方案二：JavaScript动态适配（兼容任意图片比例） #

如果你的表情包图片比例不固定，用JS动态获取图片的原始宽高，再计算父容器的比例更稳妥：

h1 { margin-top: 100px; }
.parent { 
  border: 1px solid black; 
  display: inline-block; 
  position: relative; 
  background: #777;
  width: 100px;
}
.parent .rotate { 
  transform: rotate(90deg) translate(0, -100%);
  transform-origin: top left;
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
}
.parent h4 { 
  position: absolute; 
  left: 0; 
  right: 0; 
  text-align: center; 
  color: white; 
  z-index: 1;
  margin: 0;
}
.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>
<script>
// 等图片加载完成后计算比例
const rotateImg = document.querySelector('.rotate');
rotateImg.onload = function() {
  // 旋转后宽高比 = 原图高度 / 原图宽度
  const ratio = this.naturalHeight / this.naturalWidth;
  document.querySelector('.parent').style.aspectRatio = ratio;
}
</script>

这样不管你的表情包图片是横版还是竖版，父容器都会自动适配旋转后的尺寸，文字也能完美贴合在图片上下。

内容的提问来源于stack exchange，提问作者Samuel