Home>

[]
・ In the lower right corner of the .container, arrange the images below the text
・ I want the text width and image width to be the same even when the text becomes longer

[I ’m worried]

If the width of the text is specified as the parent element of the image, it seems to be solved.
Considering the possibility of the text length changing after that, this method seems not very good.


Even if the method of "①" is taken, if the width of the text is specified as the parent element of the image with vw,
When viewed on a smartphone screen, the image protrudes from the width of the text.
* Since it is a site for smartphones, isn't vw better? I specify with vw.
(The dummy margin below is px, but the actual margin is also specified by vw)

[Reference image]
The upper blue square ... The width of the text is specified as the parent element of the image by vw
Bottom blue square… The width of the text is not specified as the parent element of the image with vw

▼ Smartphone vertical screen: collapsed when the model (smartphone screen width) changes

▼ Smartphone horizontal screen. Regardless of the model, it is sticking out

<div>
    <div>
      <div>
        <div>
          <p>ah ah ah ah</p>
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <div>
      <div>
        <div>
          <p>ah ah ah ah</p>
        </div>
        <div>
        </div>
      </div>
    </div>
  </div>
. container {
  padding: 100px 30px 30px;
  width: 80%;
  margin: 30px auto;
  border: 1px solid blue;
}
.box {
  text-align: right;
}
.inner {
  display: inline-block;
  width: 112px;
}
.inner img {
  width: 27.1vw;
}
.now .inner {
  width: auto;
}

or more.
If i have any good way, I would appreciate it.

  • Answer # 1

    If the image ratio is fixed.

    . inner {
      display: inline-block;
      position: relative;/* ADD * /
    }
    p {
        padding-bottom: 50%;
    }
    img {
        width: 100%;
        position: absolute;
        right: 0;
        bottom: 0;
    }

    Working sample:https://jsfiddle.net/2h8qz9fs/