CSS Gridに画像がフィットしない

CSSグリッドを縦に３つに分けて、真ん中の領域に対し、画像をアスペクト比を保ったままフィットしてほしいのですが、うまくいきません。

水色に塗った領域にフィットしたいのですが、ウィンドウを縦に小さくすると、画像がグリッドからはみでてしまったり、拡縮がうまくいっていません。

どうすればフィットするのでしょうか？

html
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<link href="style.css" rel="stylesheet" type="text/css">
6</head>
7<body>
8
9  <div class="grid-container">
10    <div class="header_area">
11      <div id="text">テキスト表示</div>
12    </div>
13    <div class="img_area">
14      <div id="image">
15        <img src="https://konvajs.org/assets/yoda.jpg"/>
16      </div>
17    </div>
18    <div class="footer_area">
19      <button type=button onclick="alert('クリック')">クリック</button>
20    </div>
21  </div>
22
23</body>
24</html>

css
1body {
2 margin: 0;
3}
4
5.grid-container {
6    display: grid;
7    grid-template-columns: 100vw;
8    grid-template-rows: 10vh 80vh 10vh;
9    grid-template-areas: "header_area" "img_area" "footer_area";
10}
11  
12.header_area {
13  grid-area: header_area;
14}
15
16.footer_area {
17  grid-area: footer_area;
18}
19
20.img_area {
21  grid-area: img_area;
22}
23
24#text {
25  width: 100%;
26  height:100%;
27  background-color: peru;
28} 
29  
30#image {
31  width: 100%;
32  height:100%;
33  background-color: aqua;
34}
35
36img {
37  object-fit: scale-down;
38}
39
40button{
41  width: 100%;
42  height: 100%;
43}
44
45

行動規範の内容に同意します

回答1件

ベストアンサー

CSS
1img {
2  width: 100%; /* ADD */
3  height:100%; /* ADD */
4  object-fit: scale-down;
5}

投稿2019/09/03 12:32

kei344

総合スコア69625

退会済みユーザー

2019/09/03 12:46

ありがとうございました！ img { width: 100%; height:100%; object-fit: contain; } でうまくいきました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

CSS Gridに画像がフィットしない

関連した質問