2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Webサイト制作で画像を埋め込む有効な技術

2
Posted at

こんにちは!
今回はWebサイト制作の際に画像を埋め込む技術をここに残したいと思います。

画像を埋め込む際に例えば横並びのボックスデザインを実装したいとき、画像の縦幅がうまく調整できない状況におちいるときもあるかと思います。

そのときは以下のようなコードを書いてみてください。

main.css
.img-compornent{
    objectfit: cover;
    width: 100%;
    height: 100%;
}

このコードは、divタグなどで画面内の領域を決めている場合にその領域内に画像を崩さずに画面いっぱいに埋め込むことができます。

今回は少し短いですがここまでにしたいと思います!

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?