画像サイズを指定する時

Question

以下のHTMLのような時に、widthを５０％にしようとcssに記述すると、testに記述した時とimages-testに記述したときで表示されるサイズが異なるのですが、親要素と子要素では%が異なるのでしょうか？
それとも不具合？バグなのでしょうか。

<div class="test">
  <div class="images-test">
    <img src="./images/test.jpg">
  </div>
</div>

.test {
width: 50%;
}

.images-test {
width: 50%;
}

それぞれの時の表示サイズが違うという意味で2つ載せました。

Comments

[m.ts10806]

そのCSSをご提示ください。
状況再現できるコードがないとアドバイスしようがありません。

Answer 1

/* セレクタの間違い
images-test {*/
.images-test {
width: 50%;
}

Comments

[Tsann]

コピーミスです。

[kei344]

それではHTML全体とCSS全体、及び画像サイズを質問文に追記してください。

Answer 2

width: 50%;は、「親要素の横幅 - 親要素の左右のpadding」に対して50%、という意味です。
(画面幅に対して50%、という指定をしたい場合はwidth: 50vw;という方法があります。)

以下の例のように、どの要素にwidth: 50%;を指定するかによって画像の横幅は変わります。

まず.testの親要素の横幅を800px、.testにwidth: 50%;を指定場合の例です。

.test {
  padding: 30px;
  width: 50%;
}
.images-test {
  padding: 80px;
}

---

次に.testの親要素の横幅を800px、.images-testにwidth: 50%;をした場合の例です。

.test {
  padding: 30px;
}
.images-test {
  padding: 80px;
  width: 50%;
}

---

最後に.testの親要素の横幅を800px、img自体にwidth: 50%;をした場合の例です。

.test {
  padding: 30px;
}
.images-test {
  padding: 80px;
}
.images-test img {
  width: 50%;
}