別ウィンドウで開く画像に余白が付いてしまう。

前提・実現したいこと

画像をクリックした時、別ウィンドウで大きめの画像を余白無しで開くようにしたいのですが、Chromeで見たところ別ウィンドウで開いた画像の右と下に余白が付いてしまいます。この余白が出ないように画像サイズピッタリに別ウィンドウを開きたいです。

発生している問題・エラーメッセージ

エラーは特に出ません。

該当のソースコード

html
1<!DOCTYPE html>
2<html dir="ltr" lang="ja" data-whatintent="keyboard">
3
4<head>
5　<meta charset="UTF-8">
6　<title>別ウィンドウで画像を開く</title>
7　<link href="css/style.css" rel="stylesheet" type="text/css">
8　<script src="javascript/jquery-1.12.4.js"></script>
9　<script src="javascript/phone-number.js"></script>
10　<!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="javascript/selectivizr-min.js"></script><![endif]-->
11　<!--[if lt IE 9]><script type="text/javascript" src="javascript/html5shiv.js">　　</script><![endif]-->
12　<!--[if lt IE 9]><script type="text/javascript" src="javascript/css3-mediaqueries.js"></script><![endif]-->
13</head>
14
15<body>
16
17　<!-- メイン -->
18　<div id="main" role="main">
19
20　　<section>
21　　　<div class="content">
22　　　　<div class="pictures_02 clearfix">
23　　　　　<div class="picture"><img id="photo01" class="size_210x140" src="images/photo6.jpg" onclick="imgwin('photo6_origin.jpg')" alt="白いセーターの女性" title="" width="210" height="140" tabindex=0></div>
24　　　　　<div class="picture"><img id="photo02" class="size_210x140" src="images/photo7.jpg" onclick="imgwin('photo7_origin.jpg')" alt="天使の女性" title="" width="210" height="140" tabindex=0></div>
25　　　　　<div class="picture"><img id="photo03" class="size_210x140" src="images/photo8.jpg" onclick="imgwin('photo8_origin.jpg')" alt="寝転ぶ女性" title="" width="210" height="140" tabindex=0></div>
26　　　　　<div class="picture"><img id="photo04" class="size_210x140" src="images/photo9.jpg" onclick="imgwin('photo9_origin.jpg')" alt="ピンク髪の女性" title="" width="210" height="140" tabindex=0></div>
27　　　　　<div class="picture"><img id="photo05" class="size_210x140" src="images/photo10.jpg" onclick="imgwin('photo10_origin.jpg')" alt="夕日と女性" title="" width="210" height="140" tabindex=0></div>
28　　　　　<div class="picture"><img id="photo06" class="size_210x140" src="images/photo11.jpg" onclick="imgwin('photo11_origin.jpg')" alt="花束を持つ女性" title="" width="210" height="140" tabindex=0></div>
29　　　　</div>
30　　　</div>
31　　</section>
32
33　</div>
34　<!-- / メイン -->
35
36　<script src="javascript/what-input.js"></script>
37
38　<script src="javascript/window_photo_03.js"></script>
39
40</body>
41</html>
42

JavaScript
1var image = new Image();
2   image.src = "http://cgi1.plala.or.jp/~tmyk1979/images/"+img;//高さと幅を取得したいURLを入力
3console.log(image.src);
4   image.addEventListener("load", function(event){
5   var img_width  = image.width;  // 幅
6   var img_height = image.height; // 高さ
7console.log(img_width);
8console.log(img_height);
9/* ウィンドウを開く位置、ウィンドウサイズを指定 */
10        var opt = "";
11        opt+='top=0,left=0';
12        opt+=',width='+img_width+',height='+img_height+',';
13        opt+='directories=0,toolbar=0,menubar=0,scrollbars=0,status=0,resizable=0';
14        /* 新ウィンドウを開く */
15        jsw=window.open("","jsw",opt);
16console.log(jsw);
17        jsw.focus();
18        /* 新ウィンドウにドキュメントを書出 */
19        jsw.document.open();
20        htm  = '<html style="margin:0;padding:0;width:'+img_width+'px;height:'+img_height+'px;">'
21        htm+='<head>';
22        htm+='<meta http-equiv="Content-Type" content="text/html; charset=utf-8">';
23        htm+='<title>画像サンプル</title>';
24        htm+='</head>';
25      /* body要素の余白をゼロに指定 */
26        htm+='<bod' + 'y style="margin:0;padding:0;width:'+img_width+'px;height:'+img_height+'px;">';
27        htm+='<img src="images/'+img+'" width="'+img_width+'" height="'+img_height+'" border="0" alt="" style="margin:0;padding:0;">';
28        htm+='</bod'+'y></html>';
29        jsw.document.write(htm);
30   })
31}
32

試したこと

ウィンドウサイズを指定して開き、htmlタグ、bodyタグ、imgタグそれぞれに同じサイズを指定し、margin,paddingともに「0」を指定したのですがそれでも余白が付いてしまいます。

補足情報（FW/ツールのバージョンなど）

テキストエディタはSublime Text バージョン3.2.2を使っています。
動作確認はGoogle Chrome　バージョン80.0.3987.122（Official Build）（64 ビット）を使って行っています。

ここにより詳細な情報を記載してください。

下記URLに症状を再現しております。
http://cgi1.plala.or.jp/~tmyk1979/window_photo_03.html

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

回答2件

こんなかんじでやると特に問題はなさそうですが

codepen

投稿2020/03/03 00:54

編集2020/03/03 00:55

yambejp

総合スコア116724

yambejp

2020/03/03 05:18 編集

※修正版 <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#btn').addEventListener('click',e=>{ console.log(e.target.nodeName) var nWin=window.open('','_blank','height=150,width=200'); var img=Object.assign(document.createElement('img'),{'src':'https://placehold.jp/ff0000/00ffff/200x150.png?text=1',margin:0}); Object.assign(nWin.document.querySelector('body').style,{margin:0,display:"inline",overflow:"hidden"}); nWin.document.querySelector('body').appendChild(img); }); }); </script> <input type="button" value="open" id="btn">