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

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

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

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1472閲覧

領域外にある画像を表示したい

shori0128

総合スコア29

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/06/26 13:53

編集2022/01/12 10:55

###前提・実現したいこと
electronを利用し、画像のビューワーアプリを作成しています。

イメージ説明

画面上部のツールバーにある「画像の拡大表示」を行った場合、画像をFlexboxを用い中央に寄せているせいか、画像の左上の一部が領域外になり画像が切れた状態になってしまいます。

イメージ説明

画像の表示は中央に寄せた上で見切れてしまっている部分を表示する良い方法はないでしょうか?
なるべくpadding,marginは使わない方法でご教示いただけると助かります。

また、ソースは一部抜粋して記述しているため、漏れがあるかもしれません。
必要な箇所が漏れていましたらご指摘をお願いします。

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

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset='UTF-8'> 6 <meta name='viewport' content='width=device-width, initial-scale=1.0'> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title></title> 9 <link rel='stylesheet' href='js/ext/bootstrap/css/bootstrap.css'> 10 <link rel='stylesheet' href='js/ext/treeview/css/jquery.treeview.css'> 11 <link rel='stylesheet' href='style.css'> 12 <script type='text/javascript' src='js/jquery.load.js'></script> 13 <script type='text/javascript' src='js/jquery-3.1.1.js'></script> 14 <script type='text/javascript' src='js/ext/bootstrap/dist/js/bootstrap.min.js'></script> 15 <script type='text/javascript' src='js/ext/rotate/jQueryRotate.js'></script> 16 <script type='text/javascript' src='grobal.js'></script> 17 <script type='text/javascript' src='func.js'></script> 18 <script type='text/javascript' src='view.js'></script> 19</head> 20 21<body style='overflow: hidden;'> 22 <div id='header'> 23 <!--ツールバー--> 24 <div class='fixheader'> 25 <input type='image' id='btn1' class='imageBtn' title='前へ' alt='前 へ' src='images/prev.png'> 26 <input type='image' id='btn2' class='imageBtn' title='次へ' alt='次 へ' src='images/next.png'> 27 <input type='image' id='btn3' class='imageBtn' title='左に回転' alt='左に回転' src='images/turn_left.png'> 28 <input type='image' id='btn4' class='imageBtn' title='右に回転' alt='右に回転' src='images/turn_right.png'> 29 <input type='image' id='btn5' class='imageBtn' title='拡大' alt='拡 大' src='images/zoom_in.png'> 30 <input type='image' id='btn6' class='imageBtn' title='縮小' alt='縮 小' src='images/zoom_out.png'> 31 <input type='button' id='btn7' class='smallBtn' value='出 力'> 32 <input type='button' id='btn8' class='smallBtn' value='属 性'> 33 <input type='button' id='btn9' class='smallBtn' value='削 除'> 34 </div> 35 </div> 36 <div class='viewWindow' style='position: relative; overflow: auto;'> 37 <img id='imgData' style='position: absolute;'> 38 </div> 39</body> 40 41</html>

javascript

1$(function () { 2 var dw, dh; 3 var arrayImg, selectIndex, selectImg; 4 var imgWidth, imgHeight; 5 var angle = 0; 6 var zoom = 100; 7 8 var cssObj = function () { 9 var clientWidth = document.documentElement.clientWidth; 10 var clientHeight = document.documentElement.clientHeight - $('#header').height(); 11 return { 12 "width": clientWidth, 13 "height": clientHeight, 14 "line-height": clientHeight 15 }; 16 }; 17 18 //■[ウィンドウ] 画像表示 19 function drawImage() { 20 var windowWidth = cssObj().width; 21 var windowHeight = cssObj().height; 22 23 var img = new Image(); 24 img.src = imgPath + selectImg; 25 26 img.onload = function () { 27 imgWidth = img.width; 28 imgHeight = img.height; 29 30 var scale = function () { 31 var rate; 32 33 if ((angle / 90) % 2 == 0) { 34 //画像が上、もしくは下を向いている場合 35 rate = (imgWidth > imgHeight) ? (windowWidth / imgWidth) : (windowHeight / imgHeight); 36 } else if ((angle / 90) % 2 == 1) { 37 //画像が左、もしくは右を向いている場合 38 rate = (imgWidth > imgHeight) ? (windowHeight / imgWidth) : (windowWidth / imgHeight); 39 } 40 return rate; 41 }; 42 43 dw = Math.floor(imgWidth * scale() * (zoom / 100)); 44 dh = Math.floor(imgHeight * scale() * (zoom / 100)); 45 46 $('#imgData').attr({ 47 "width": dw, 48 "height": dh, 49 "src": imgPath + selectImg 50 }); 51 52 $('.imgArea').css({ 53 "width": dw, 54 "height": dh 55 }); 56 57 $('#imgData').rotate(angle); 58 59 $('title').text(selectImg); 60 } 61 } 62 63 //■[ツールバー] 左に回転、右に回転 64 $('#btn3, #btn4').on('click', function () { 65 var id = $(this).attr('id') 66 67 if (id == 'btn3') { 68 angle -= 90; 69 } else if (id == 'btn4') { 70 angle += 90; 71 } 72 73 zoom = 100; 74 75 drawImage(); 76 }); 77 78 //■[ツールバー] 拡大、縮小 79 var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll'; 80 81 $('#btn5, #btn6').on('click', function () { 82 var id = $(this).attr('id') 83 84 if (id == 'btn5') { 85 zoom = (zoom >= 400) ? 400 : zoom + 20; 86 } else if (id == 'btn6') { 87 zoom = (zoom <= 20) ? 20 : zoom - 20; 88 } 89 90 drawImage(); 91 }), 92 $(window).on(mousewheelevent, function (event) { 93 if (event.ctrlKey == true) { 94 event.preventDefault(); 95 96 var delta = event.originalEvent.deltaY ? -(event.originalEvent.deltaY) : event.originalEvent.wheelDelta ? event.originalEvent.wheelDelta : -(event.originalEvent.detail); 97 98 if (delta < 0) { 99 zoom = (zoom <= 20) ? 20 : zoom - 20; 100 } else { 101 zoom = (zoom >= 400) ? 400 : zoom + 20; 102 } 103 104 drawImage(); 105 } 106 }); 107});

css

1* { 2 -webkit-user-select: none; 3 user-select: none; 4} 5 6body { 7 font-size: 13px; 8 background-image: url('images/background_image.png'); 9} 10 11div.viewWindow { 12 display: flex; 13 align-items: center; 14 justify-content: center; 15 position: relative; 16} 17 18input.smallBtn { 19 width: 70px; 20 height: 35px; 21 margin-left: 3px; 22 margin-right: 3px; 23} 24 25input.imageBtn { 26 width: 28px; 27 height: 28px; 28 margin-left: 3px; 29 margin-right: 3px; 30} 31 32input.imageBtn:hover { 33 background-color: rgba(120, 120, 120, 0.5); 34}

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問