java script input type="file" のサイズ変更について

前提・実現したいこと

スマフォのカメラロールの画像を使いたいと考えています
コード通りに動くのですが（ファイルを選択）のところが小さくサイズ変更しようと思ったのですがうまくいきません。
参考にしたURL
https://qiita.com/keiskimu/items/a7bce6d0e9511cd396af#%E6%BA%96%E5%82%99

該当のソースコード

index.html

<html> <head> <meta charset="utf-8"> <title>CameraRoll</title> <label> <input type="file" id="file" /> </label> <body> <script src="script.js"></script> </body> </html>

script.js

var input = document.getElementById('file');
input.addEventListener('change', function (e) {
var file = e.srcElement.files[0];

var fr = new FileReader();
fr.addEventListener('load', function() {
var url = fr.result;

// Imageオブジェクトをつくり
var img = new Image();
// srcにurlを指定する
img.src = url;
// そのままだとでかすぎるのでサイズ調整して
img.height = 200;
// bodyに追加する
document.body.appendChild(img);

});
fr.readAsDataURL(file);
});

main.css

.label{
width: 100px;
height: 100px;
}

m.ts10806

2020/06/25 07:40

コードはマークダウンのcode機能を利用してご提示くださいまた、「うまくいかない」では何も伝わりませんので起きている現象を具体的に記載してください。あと「PHP」は本件とは直接関係ないのでは？画面レイアウトの話であればJavaScriptではなくCSSのほうが良いのでは。

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

回答1件

まずは index.html の中で、label元素をbodyの中に入れてください。作動できるかもしれませんが、HTML標準には合っていません。

html
1<html>
2<head>
3<meta charset="utf-8">
4<title>CameraRoll</title>
5</head>
6<body>
7<label>
8<input type="file" id="file" />
9</label>
10<script src="script.js"></script>
11</body>
12</html>

ファイルinputのサイズに関しては：

css
1.label {
2  width: 100px;
3  height: 100px;
4}

.labelはクラスを選択していますが、そういうクラスがHTMLにありません。<label>はタグです。タグを選択する際には、labelだけでいいです、前飾りのドットはいりません。

css
1label {
2  width: 100px;
3  height: 100px;
4}

しかし、そうしたら、全ての<label>を小さくなります。ファイル<input>にちょうどidをつけています。ファイル<input>を小さくしたいと、idを選択して調整すればいいです。idを選択する際に#を前飾ります。

css
1#file {
2  width: 100px;
3  height: 100px;
4}

もう一つ改善できるのは、<label>タグを外すこと。<label>タグはフォームフィールドの説明文に用いるので、<input>に用いるのは意味外れです。CSSにidを選択すれば、<label>はもういりません。もし他の元素と組み合わせたいのなら、<div>を用いてください。

html
1<html>
2<head>
3<meta charset="utf-8">
4<title>CameraRoll</title>
5</head>
6<body>
7<input type="file" id="file" />
8<script src="script.js"></script>
9</body>
10</html>