画像のフルサイズ表示方法

HTMLとCSSを使用した方法: HTMLファイルに以下のコードを追加します。

<div class="image-container">
  <img src="画像のURL" alt="画像の説明">
</div>

CSSファイルに以下のコードを追加します。

.image-container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image-container img {
  max-width: 100%;
  max-height: 100%;
}

この方法では、画像が親要素の幅と高さに合わせてフルサイズで表示されます。

JavaScriptを使用した方法: JavaScriptを使って画像のサイズを動的に変更する方法もあります。以下はその例です。

<div id="image-container">
  <img id="full-size-image" src="画像のURL" alt="画像の説明">
</div>
<button onclick="toggleFullSize()">フルサイズ表示</button>
<script>
function toggleFullSize() {
  var image = document.getElementById("full-size-image");
  image.classList.toggle("full-size");
}
</script>
<style>
.full-size {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: white;
  z-index: 9999;
}
</style>

この方法では、ボタンをクリックすると画像がフルサイズで表示されます。再度ボタンをクリックするとフルサイズ表示が解除されます。

これらはいくつかの一般的な方法ですが、実際の使用状況や要件によって適した方法が異なる場合があります。また、フルサイズ表示には画像の解像度やアスペクト比、画面サイズなども考慮する必要があります。