Question

我有这个，我想保持img正常并将div旋转成平行四边形，我就像这样管理

＆＃13;

.parallelogram {
  width: 180px;
  height: 60px;
  overflow: hidden;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(15deg);
  -o-transform: skew(15deg);
  position: relative;
}

.img {
  position: absolute;
  width: 440px;
  height: 150px;
  -webkit-transform: skew(21deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  left: 10px;
  top: -10px;
}

＆＃13;

<div class="parallelogram">
  <div class="img">
    <img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
  </div>
</div>

＆＃13;

我的问题是img保持其父宽度。即使我要求它是440px的180px。而且我不明白为什么。

我尝试使用vw，％和它都没有用！

提前谢谢

Answer 1

要使图片占据.img div的宽度，您还需要此规则，因为<img>标记是具有类.img的div的子级：

.img img {
  width: 100%;
  height: auto;
}

（height: auto;实际上没有必要，因为它是默认的

评论后的补充：

您必须从外部DIV中删除overflow: hidden;：

＆＃13;

.parallelogram {
  width: 180px;
  height: 60px;
  -webkit-transform: skew(-21deg);
  -moz-transform: skew(15deg);
  -o-transform: skew(15deg);
  position: relative;
  background-color: blue;
  /*added for testing*/
}

.img {
  position: absolute;
  width: 440px;
  height: 150px;
  -webkit-transform: skew(21deg);
  -moz-transform: skew(-15deg);
  -o-transform: skew(-15deg);
  left: -20px;
  right: 0px;
  top: -10px;
  background-color: red;
  /*added for testing*/
  opacity: 0.5;
  /* makes overlap area purple*/
}

.img img {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="parallelogram">
  <div class="img">
    <img src="http://placehold.it/180x60/#0d0"/>
  </div>
</div>

＆＃13;

Answer 2

.parallelogram {
            width: 180px;
            height: 60px;
            overflow: hidden;
            -webkit-transform: skew(-21deg);
            -moz-transform: skew(15deg);
            -o-transform: skew(15deg);
            position: relative;
            background-color:blue;/*added for testing*/
    }

    .img {
            position: absolute;
            width: 440px;
            height: 150px;
            -webkit-transform: skew(21deg);
            -moz-transform: skew(-15deg);
            -o-transform: skew(-15deg);
            left:-20px;
            right:0px;
            top:-10px;
            background-color:red;/*added for testing*/
            opacity: 0.5;/* makes overlap area purple*/
            
    }

 <div class="parallelogram">
            <div class="img">
                    <img..../>
            </div>
    </div>

我向左做：-20px;和右：0px;使img看起来像平行四边形。我找到了这个Is there are way to make a child DIV's width wider than the parent DIV using CSS?，所以我想尝试一下。我希望这会有所帮助。

孩子的css宽度大于父母

2 个答案: