webサイトのトップ画像の表示の仕方。

Question

このwebサイト(https://www.takami-labo.com/)の様なトップ画像にしたい!

普通にimgタグで表示させると、ウィンドウ幅を変えると、それに合わせ大きくなったり、小さくなったり...。
このサイトの様に、画像を表示(大きくしても、小さくしても画像サイズが変わらない)するにはどの様にしたらいいのでしょうか？

html

<div class="top-image">
<img src="../top.img">
</div>

すごく綺麗なサイトだと思い模写しておりましたが、いきなりつまずきました。よろしくお願いします。

Answer 1

imgタグにwidth: 100%;を指定して、heihgtを固定値で設定しまえば解決しそうですが
どうでしょうか？

Comments

[kenshiba]

width,heightを固定し、
object-fit:none;と
over-flow:hidden;で
できました。
ご親切にありがとうございます。

Answer 2

object-fit:noneとか？

img{
  object-fit: none;
  height: 200px;
}

https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

Comments

[kenshiba]

ご回答ありがとうございます。
img{
object-fit: none;
}
だと、ウィンドウ幅を変えるとそれに伴い、画像高さが変わってしまいました。
横幅は画像が見切れてもいいのですが、高さそのまま、画像の縮小拡大しない。という使用にしたいのです。

[defghi1977]

> だと、ウィンドウ幅を変えるとそれに伴い、画像高さが変わってしまいました。
横幅は画像が見切れてもいいのですが、高さそのまま、画像の縮小拡大しない。という使用にしたいのです。

であればそのように質問にお書き下さい. 元の質問の内容からそのような意図を読み取ることは不可能です.

[kenshiba]

確かに、私の質問では、object-fit: none;　でとなりますね。
言葉足らずで申し訳ありませんでした。

[kenshiba]

質問が要点を得ない中、ご回答いただきありがとうございました。