css width of child bigger than parent

Question

i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this

.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;
}

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

My problem is that the img keeps its parent width. even though i ask it to be 440px its 180px. and i dont understand why.

I tried with vw, and % and none of it works!

Thank you in advance

Maybe it's `overflow: hidden;` causing this. Remove this from .parallelogram — Aakash Martand, Mar 09 '17 at 13:31
removing overflow will destroy my parallelogram. But even removing it does not fix the problem. — Pet, Mar 09 '17 at 13:37

Johannes · Answer 1 · 2017-03-09T14:02:56.623

For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:

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

(height: auto; is actually not necessary, since it's the default)

ADDITION AFTER COMMENT:

You have to remove overflow: hidden; from the outer DIV:

.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;
}

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

it does not change anything. The image its still 180px. – Pet Mar 09 '17 at 13:38 — Pet, Mar 09 '17 at 13:38
see the addition to my answer – Johannes Mar 09 '17 at 14:03 — Johannes, Mar 09 '17 at 14:03

score 0 · Answer 2 · edited May 23 '17 at 11:53

.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>

I made left:-20px; and right:0px; to make the img appear like parallelogram. I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.

css width of child bigger than parent

2 Answers2