小编OXi*_*GEN的帖子

我想用CSS旋转图像90度.我可以进行旋转,但是图像的位置不是应该的.首先,它将覆盖同一div中的一些其他元素,其次,其垂直维度将变得大于包含div.这是我的代码

.imagetest img {
  transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  width: 100%;
}

.photo {
  width: 95%;
  padding: 0 15px;
  margin: 0 0 10px 0;
  float: left;
  background: #828DAD;
}

将两个类定义为

<article>
  <section class="photo">
    <div>Title</div>
    <div class="imagetest">
      <img src="https://picsum.photos/200/100"/>
    </div>
  </section>
</article>

有没有办法将图像保留在该部分内？我可以翻译和缩放图像,使其在部分内,但只有在我事先知道图像大小的情况下才有效.我想有一个不依赖于尺寸的可靠方法.

我有一个带有display: flex. 在两个角，一个 svg 元素应该拉伸到容器的整个高度。容器的高度取决于元素中有多少文本。

在 FF 和 Chrome 中它工作得很好，但 IE 使 svg 始终为 150px 高度。我不能给 svg 一个固定的大小，因为如果文本变成多行并且元素增长，它应该与元素一起拉伸。

我在这里做了一个代码笔

.flag-header {
  display: flex;
  max-width: 80%;
  position: relative;
}

.flag-header__headline {
  background-color: #bf0b1c;
  padding: 10px 0;
  color: white;
  font: 900 24px/120% Verdana;
  text-transform: uppercase;
}

.flag-header__corner {
  width: 30px;
}

.flag-header__corner-shape {
  height: 100%;
  width: 30px;
  fill: #bf0b1c;
}

<div class="flag-header">
  <div class="flag-header__corner">
    <svg class="flag-header__corner-shape" id="Layer_1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 22.11 30" preserveAspectRatio="none">
        <polygon class="cls-1" points="22.11 …