HTML, CSSで書いたコードで画像のサイズを変更したい。

###前提・実現したいこと
画像のサイズを変更しようとしています。画像のサイズを適切に変更する方法を教えてください。

###発生している問題・エラーメッセージ
現状のコードでは縮小した画面では少し縮小されたように感じるのですが、フルスクリーンにすると元のサイズに戻ってしまう問題が発生しています。ブラウザはGoogle Chromeを使用しています。

###該当のソースコード

<!doctype html>
<html>
<style>
.title{
  position: relative;
  top: 150px;
}
</style>


<body>
<center>
<div class ="title">
  <img src="1.png" width="10%" height="10%">
  </div>

 </body>
</html>

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

回答2件

ベストアンサー

head要素が必要です。
head要素中にはtitle要素が必要です。
center要素はHTML5で廃止されています。CSSで同等のものを実装する必要があります。
width属性, height属性の値はピクセル幅であり、単位を書いてはいけません。

以下のように行ってみてはいかがでしょうか？

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        html, body {
8            width: 100%;
9        }
10
11        .title {
12            margin: 0 auto;
13        }
14
15        .title {
16            position: relative;
17            top: 150px;
18            width: 200px;
19            height: 200px;
20        }
21
22        .title > img {
23            width: 100%;
24            height: 100%;
25            object-fit: contain;
26        }
27    </style>
28</head>
29<body>
30<div class="title">
31    <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=1.png" width="150" height="150" alt="">
32</div>
33</body>
34</html>