cssで画像サイズを統一したいがはみ出てしまいます。

Question

前提・実現したいこと

今回、.rectの中身の.book-rightを画像にして、画像のサイズを.book-rightに合わせたいのですが、以下のコードでCSSに画像を入れると画像が大きすぎてはみ出てしまいます。

このほかにも大量の画像があるので、CSS上で大きさを全て統一しようと思っているのですが、Photoshopなどを使って全てをリサイズしないとできないのでしょうか？
HTMLもCSSも変更して構いませんので、どうぞ、よろしくお願いいたします。

コード

<div class="book-before">
  <div class="rect">
    <div class="book-all book-top"></div>
    <img class="book-all book-right">
    <div class="book-all book-covor"></div>
  </div>
</div>

.book-right{
  width: 90px;
  height: 180px;
  left: 40px;
  transform: rotateY(90deg);
  transform-origin: left;
  background-color: hsla(50,100%,50%,0.7);
}
.rect img{
  background-image: url('AAA.jpg');
}

補足情報

ここにより詳細な情報を記載してください。

Answer 1

背景画像なら background-size - MDNで要素内に収めることができます。(画像要素に適用させたいなら object-fit ※IE非対応)。"CSS上で大きさを全て統一しようと思っている" とありますが、不必要に大きい画像は前もって適当なサイズにリサイズしておくことをオススメします。

Comments

[umi3]

ありがとうございます。試してみます！