html - 画像のサイズを HTML ウィンドウのパーセンテージに合わせる

Question

ドキュメント ウィンドウのパーセンテージで画像を定義することは可能ですか? いくつかの div タグにネストされているため、親タグではなく、ウィンドウを参照して高さ% を定義する必要があります。実際には、このようなもの...

<img src="image.jpg"  height="50% of window"/>

Answer 1

CSS ではできませんが、JavaScript では可能です。

yourImage.height = Math.floor(window.innerHeight / 2)

Answer 2

ここでこれに最適なソリューションを見つけました。ミックスに画像を追加したとき、その記事に示されている例はうまくいきませんでした。ただし、画像とテキストで機能する「カード」レイアウトを作成して拡張しました。

.course-card-wrapper {
    display: inline-block;
    position: relative;
    width: 50%;
    background-color:silver;
}
.course-card-aspect-ratio {
    padding-top: 150%;
}
.course-card-image {
  width: 100%;
  height:auto;
}
.course-card {
  position:absolute;
  left:10px;
  top:10px;  
  bottom:10px;
  right:10px;
  background-color:white;
  overflow:hidden;
  text-align:center;
  box-shadow: 0 0 10px rgba(0,0,0, 0.2);
}

course-card-aspect-ratio の値を必要な倍数に調整します。

これが作業フィドルです。