親要素をカバーする画像の作り方

方法1: background-size プロパティを使用する方法

<style>
  .parent {
    position: relative;
    width: 300px; /* 親要素の幅 */
    height: 200px; /* 親要素の高さ */
    overflow: hidden;
  }
  .child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('画像のURL');
    background-size: cover;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

この方法では、親要素に position: relative; を設定し、子要素に position: absolute; を設定しています。子要素の top, left, width, height プロパティを 100% に設定することで、親要素全体をカバーするようになります。また、子要素の background-size プロパティを cover に設定することで、画像が親要素にフィットするようになります。

方法2: object-fit プロパティを使用する方法

<style>
  .parent {
    width: 300px; /* 親要素の幅 */
    height: 200px; /* 親要素の高さ */
    overflow: hidden;
  }
  .child {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>
<div class="parent">
  <img class="child" src="画像のURL" alt="画像">
</div>

これらの方法を使用すると、画像が親要素に完全にカバーされます。どちらの方法でも、親要素のサイズが固定されている場合は問題ありませんが、レスポンシブデザインを適用する場合は、適切なメディアクエリを使用して画像のサイズや位置を調整する必要があります。