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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

tmyk1979
tmyk1979

総合スコア1

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

1870閲覧

投稿2020/03/03 00:12

前提・実現したいこと

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

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

エラーは特に出ません。

該当のソースコード

html

<!DOCTYPE html> <html dir="ltr" lang="ja" data-whatintent="keyboard"> <head>  <meta charset="UTF-8">  <title>別ウィンドウで画像を開く</title>  <link href="css/style.css" rel="stylesheet" type="text/css">  <script src="javascript/jquery-1.12.4.js"></script>  <script src="javascript/phone-number.js"></script>  <!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="javascript/selectivizr-min.js"></script><![endif]-->  <!--[if lt IE 9]><script type="text/javascript" src="javascript/html5shiv.js">  </script><![endif]-->  <!--[if lt IE 9]><script type="text/javascript" src="javascript/css3-mediaqueries.js"></script><![endif]--> </head> <body>  <!-- メイン -->  <div id="main" role="main">   <section>    <div class="content">     <div class="pictures_02 clearfix">      <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>      <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>      <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>      <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>      <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>      <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>     </div>    </div>   </section>  </div>  <!-- / メイン -->  <script src="javascript/what-input.js"></script>  <script src="javascript/window_photo_03.js"></script> </body> </html>

JavaScript

var image = new Image(); image.src = "http://cgi1.plala.or.jp/~tmyk1979/images/"+img;//高さと幅を取得したいURLを入力 console.log(image.src); image.addEventListener("load", function(event){ var img_width = image.width; // 幅 var img_height = image.height; // 高さ console.log(img_width); console.log(img_height); /* ウィンドウを開く位置、ウィンドウサイズを指定 */ var opt = ""; opt+='top=0,left=0'; opt+=',width='+img_width+',height='+img_height+','; opt+='directories=0,toolbar=0,menubar=0,scrollbars=0,status=0,resizable=0'; /* 新ウィンドウを開く */ jsw=window.open("","jsw",opt); console.log(jsw); jsw.focus(); /* 新ウィンドウにドキュメントを書出 */ jsw.document.open(); htm = '<html style="margin:0;padding:0;width:'+img_width+'px;height:'+img_height+'px;">' htm+='<head>'; htm+='<meta http-equiv="Content-Type" content="text/html; charset=utf-8">'; htm+='<title>画像サンプル<\/title>'; htm+='<\/head>'; /* body要素の余白をゼロに指定 */ htm+='<bod' + 'y style="margin:0;padding:0;width:'+img_width+'px;height:'+img_height+'px;">'; htm+='<img src="images\/'+img+'" width="'+img_width+'" height="'+img_height+'" border="0" alt="" style="margin:0;padding:0;">'; htm+='<\/bod'+'y><\/html>'; jsw.document.write(htm); }) }

試したこと

ウィンドウサイズを指定して開き、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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Chrome

Google Chromeは携帯、テレビ、デスクトップなどの様々なプラットフォームで利用できるウェブブラウザです。Googleが開発したもので、Blink (レンダリングエンジン) とアプリケーションフレームワークを使用しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。