例えば、以下のようにJavaScriptを記述します。. targetImg.height = 200; function resizeWidthOnly( newsize ) { //document.getElementById('SampleImage2').width = newsize; 【CSS】calc()を使って計算で横幅や縦幅のサイズを指定する - Java、PHP、javascriptなどのプログラミング＆Wordpress、HTML、CSSなどのWeb情報ブログ（最近は雑記や仮想通貨のことなど幅広く） } ちなみに、上記のサンプルでは、以下のようなresizeByWidthという関数を作成して、ボタンクリックで呼び出しています。, 引数に「望みの横幅」の値を指定することで、どんなサイズにも変更できます。 GANZOOとかって形でGANまとまっているけど、GANの名前を見せられても困るでしょってのが正直なところ。初めてGANを見る人はどういうことができる... 線型計画法関連のソルバーについては知識がかなり軽薄なので、この際 (Nishishi) All rights reserved. var targetImg = document.getElementById('SampleImage3'); function resizeHeightOnly( newsize ) { 使う単位は「px」である必要はありませんから、CSSで有効な単位なら何でも付加できます。, なお、JavaScriptではなくCSSで画像をリサイズする方法は、CSS Tipsコーナーの「画像の縦横比を維持したままリサイズ(拡大/縮小)する方法」で解説していますので、よろしければそちらもご参照下さい。, にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊＋小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。, 情報サイトAll Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。➡お勧め記事リスト, ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。, ■改訂新版 JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで, ▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。, ▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。, ▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。, ■すべての人に知っておいてほしい jQuery & jQuery Mobileの基本原則, ▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。, ■実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」, ▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。, ▲HTML5, CSS3, JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。, ■これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん. }, ボタンを押すと、「画像の表示サイズは、横 150 ×縦 100 です。」のように表示されるでしょう。, なお、ここで取得できるサイズは「画像本来の大きさ」ではなく、「今表示されているサイズ」です。もし、表示サイズに関係なく本来のサイズが知りたい場合は、別途「画像本来の大きさ(オリジナルサイズ)を取得して、指定倍率で画像サイズを変更する方法」で解説しましたのでそちらをご参照下さい。, さて、画像の縦横比を無視してリサイズするのは簡単です。widthプロパティとheightプロパティに、何でも好きな値を代入すれば良いだけですから。例えば以下のように記述できます。. // targetImg.width = nsW; 例えば、, 画像の表示サイズを変更したい場合、たいていは縦横比を維持したまま変更したいんじゃないかと思います。写真の場合は特にそうですよね。とはいえ、フレーム(枠)を作る画像だとか装飾用の画像だとか、画像によっては縦横比を無視してサイズ変更したい場合もあるでしょう。 JavaScriptを使って閲覧者のディスプレイ(画面)サイズを知るには、window.screenオブジェクトの各プロパティを参照します。画面の横幅はwindow.screen.widthで、高さはwindow.screen.heightで得られます。画面サイズではなく、ブラウザの大きさや描画領域のサイズを知るにはwindowオブジェクトの各プ … 画面サイズを取得する方法 横幅の取得方法 [crayon-5faa76cea0296549307929/] モニターの解像度を取得 [crayon-5faa76cea02a4056146289/] モ… JavaScriptだけで、それを実現するにはどのように書けば良いのでしょうか？, 単純にDOMContentLoadedイベントで初期値を設定すればよいのではないでしょうか？, “回答を投稿”をクリックすることで利用規約、プライバシーポリシー、及びクッキーポリシーに同意したものとみなされます。, このRSSフィードを購読するには、このURLをコピーしてRSSリーダーに貼り付けてください。, サイトデザイン / ロゴ © 2020 Stack Exchange Inc; ユーザーの投稿はcc by-saでライセンスされます。 rev 2020.11.13.38000, スタック・オーバーフロー をより快適に使うためには JavaScript を有効化してください, JavaScriptでdiv要素の幅の初期値と、その後動的に変更できる仕組みを作成したい, Feature Preview: New Review Suspensions Mod UX, removeEventListenerで削除するlistenerを識別する内部的な仕組み, 画面中央（縦・横）に表示したいDIV要素が、左上に表示されてしまう原因・対策を知りたい, テキスト枠内容変化後の次操作が、ボタン要素の押下だった場合、2回押す羽目になっている, 意見を述べること（意見を述べるなら、参照リソース、自分の経験で意見をサポートしてください）. やりたいことは以下みたいな感じで、. document.getElementById('SampleImage2').style.height = newsize + "px"; « 画像本来の大きさ(オリジナルサイズ)を取得して、指定倍率で画像サイズを変更する方法, 下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。, JavaScript TIPSふぁくとりー TOPへ戻る targetImg.width = 600; こんな感じ 以下の十字の部分... こういうのが地味に面倒臭くていつも調べているのでメモっておく. Since 1997. にししふぁくとりー HOMEへ戻る, このページの製作者は、にしし（西村文宏）です。 targetImg.style.width = "600px"; document.getElementById('SampleImage2').style.width = newsize + "px"; Canvasタグのwidthやheightの大きさを設定するにはタグの形式で”px等の大きさ”を指定する必要があるみたい.なのでstylesheetで”100%”とかの指定ができない. var targetImg = document.getElementById('sampleImage'); , ▼HTMLでサイズを指定 targetImg.style.width = resizeWidth + "px"; このように単位を付加すれば、CSS側で指定された画像サイズをJavaScriptで上書きできます。 こんにちは！エンジニアのワカツキです！ 最近では、jQueryなどのフレームワークへの依存を減らして、純粋なJavaScriptを使うことも多くなりました。そこで今回は、JavaScriptのみでCSSを操作する方法を解説していきたいと思います！ この記事では、以下の内容について解説します。 var orgHeight = targetImg.height; document.getElementById('sampleImage').width = 400; document.getElementById('sampleImage').height = 300; var targetImg = document.getElementById('sampleImage'); CanvasタグのWidthとHeightを変更して大きさを変える by UrusuLambda | Posted on 7月 29, 2018 4月 6, 2020 Canvasタグのwidthやheightの大きさを設定するにはタグの形式で”px等の大きさ”を指定する必要があるみたい.なので stylesheetで”100%”とかの指定ができない . canvasを内包する外側のdivとかのサイズを取得してcanvasに設定して動的に変更する必要. なんとかして「実質塗りつぶし」/「擬似塗りつぶし」やってみた. 例えば、以下のようなHTMLで画像が表示されている場合、, 
, この画像の表示サイズ(横幅と高さ)を得るには、以下のような感じで記述すれば良いでしょう。, このように記述したJavaScriptを、ボタンクリックで実行されるように書けば、下記の表示例のように「画像の表示サイズ」がアラートボックスに表示されます。, function sizeInfo() { 公式ホームページの解説によれば、 その際は、widthプロパティやheightプロパティではなく、スタイルシート側の指定であるstyle.widthプロパティやstyle.heightプロパティに値を代入しましょう。, ※特に最近はレスポンシブ・ウェブデザインの採用によって、画像にはheight: auto;のように(画像の横幅を変化させた際に)強制的に縦横比を維持するようなCSSを使っている場合もありますから、JavaScriptでheightプロパティの値を変化させても指定が効かないケースも多々ありそうな気がします。(実は今ご覧になっているこのページでもそうです。^^;), ただし、style.widthプロパティやstyle.heightプロパティに値を代入する場合には、数値だけを代入しても意味がありません。CSSの値なので数値に単位を付加して代入しなければなりません。 targetImg.style.height = 250; // 意味がない！, なお、設定するサイズに変数を使いたい場合は、下記のように + "px"のような感じの文字列を加えて、数値に単位を付加してから代入します。. JavaScriptを使って画像の表示サイズ(横幅や高さ)を調べたり、画像の表示サイズを再設定(＝リサイズ)するには、Imageオブジェクトのwidthプロパティやheightプロパティを使います。 例えば、 1. このサイトについて, このページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。 targetImg.style.height = nsH + "px"; targetImg.style.height = "250px"; 上記のように、600pxや250pxのように単位「px」を加えた文字列を代入します。 var Msg = "画像の表示サイズは、横 " + targetWidth + " ×縦 " + targetHeight + " です。"; 現在の表示サイズを知りたければ、widthプロパティやheightプロパティの値を取得するだけです。 2. targetImg.style.width = nsW + "px"; というわけで以下に、画像の縦横比を無視してリサイズする方法と、画像の縦横比を維持した状態でリサイズする方法の2種類を紹介します。, あ、その前にまずは、画像の表示サイズを取得(してアラートボックスに表示)する方法も参考までに紹介しておきます。, ウェブページ上に掲載されている画像の「現在表示されているサイズ」を調べるには、横幅はwidthプロパティを、高さはheightプロパティを参照するだけで済みます。 var targetImg = document.getElementById('SampleImage2'); 
, HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるため、CSSで画像サイズが指定されている状況では、JavaScriptでwidthプロパティやheightプロパティを変更しても表示に反映されません。 var targetHeight = targetImg.height; }, 縦横比を維持した状態でリサイズされます。 Canvas.width - キャンパスの横幅を取得、変更する. var targetWidth = targetImg.width; function resizeBoth( nsW , nsH ) { targetImg.width = newsize; var targetImg = document.getElementById('sampleImage'); ExcelやWordで画像を半透明にしたいだけなのに。。。ってことで備忘録かねてやってみる... MacのiMovieでは画像または動画を2つまでしか同時に表示できない.つまり同時に流せる動画は2つまで. 実際に表示すると以下のようになります。, function resizeByWidth( newsize ) { 現在以下のような書き方で、webページ上のdivの幅を、ボタンを押す事によって動的に変更しています。 しかしボタンを押すまでは、二つのdivが半々のサイズになってしまいます。 ってことでメモっておく... Google Fonts APIを使ってフリーのwebフォントを自分のサービスやブログで使う, Node.jsで画像とかのファイル名を指定されたらそのファイルを送り返すようにするJavaScript, FireTV Stickで無料アプリダウンロードしようとしたら「OneClick設定の請求先住所が設定されていない」と言われる, Youtube投稿者が視聴者に関して見れる情報は何があるか見てみる(Youtube Studio), HTMLで複数の画像を選択してそれをアップロードせずにローカルに表示(JQuery, JavaScript), 英語/日本語とヒエログリフを簡易変換するThoth Hieroglyph Converter HieroAlphaをちゃちゃっと作った, Amazon Musicで音楽再生しようとしてもできない「Chromeをアップデート」, Formタグを使わずFormDataでシンプルに画像をアップロードする(HTML, JavaScript). targetImg.height = orgHeight * (targetImg.width / orgWidth); ※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット＆PC用デザインになります。横幅920px以上での閲覧がお勧めです。ただし、古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。. どの後はボタンを押す事によって処理が分かれるという動きにしたいのですが、 普段何気なく見ているYoutubeの見ている人の様々な情報を蓄積して分析し... 意外とやりたいときにこれができないってつまりことが多い。 var orgWidth = targetImg.width; 投稿日: 2016/03/03 / 更新日: 2016/03/03 JavaScriptの、Canvasオブジェクトのwidthは、キャンパスの描画領域の横幅を取得、変更するプロパティです。何も指定しない場合、横幅300px、高さ150pxになります。 "JavaScript Tips Factory" : Presented by Nishishi. そこでcanvasの大きさを変更するには、canvasを内包する外側のdivとかのサイズを取得してcanvasに設定して動的に変更する必要がある. }, ※なお、CSSを使って画像のサイズを指定している場合は、上記のソースでは画像サイズが変化しない場合があります。HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるからです。その場合は、JavaScriptを使ってwidthプロパティやheightプロパティを変更するのではなく、style.widthプロパティやstyle.heightプロパティを使って変化させます。ただし、その場合は単位の付加が必要です。詳しくは末尾で紹介します。, さて、画像の縦横比を維持した状態でリサイズするには、widthプロパティかheightプロパティのどちらかにだけ値を入れた後、もう片方を同じ割合だけ変化させてやれば良いわけです。 しかしAma... 動画を投稿して初めてわかることが幾らかあったので、めもっておこうと思う. 画面サイズが変更された時に処理を行うには、.resize()を使用します。 サンプルソース 例）画面サイズ変更時にコンソールに画面サイズを出力する [crayon-5faae857b1d78417131947/] 実行サンプル 画面サイズを変更すると、現在の画面サイズを表示します。 以下のように数値だけを代入しても表示サイズは変わりません。, var targetImg = document.getElementById('sampleImage'); targetImg.style.width = 600; // 意味がない！ FireTVStickではFirefoxとかニコ動とかAbemaTVのアプリをインストールすることでそれらもテレビで見れるようになる。
, この画像の表示サイズ(横幅と高さ)を得るには、以下のような感じで記述すれば良いでしょう。, このように記述したJavaScriptを、ボタンクリックで実行されるように書けば、下記の表示例のように「画像の表示サイズ」がアラートボックスに表示されます。, function sizeInfo() { 公式ホームページの解説によれば、 その際は、widthプロパティやheightプロパティではなく、スタイルシート側の指定であるstyle.widthプロパティやstyle.heightプロパティに値を代入しましょう。, ※特に最近はレスポンシブ・ウェブデザインの採用によって、画像にはheight: auto;のように(画像の横幅を変化させた際に)強制的に縦横比を維持するようなCSSを使っている場合もありますから、JavaScriptでheightプロパティの値を変化させても指定が効かないケースも多々ありそうな気がします。(実は今ご覧になっているこのページでもそうです。^^;), ただし、style.widthプロパティやstyle.heightプロパティに値を代入する場合には、数値だけを代入しても意味がありません。CSSの値なので数値に単位を付加して代入しなければなりません。 targetImg.style.height = 250; // 意味がない！, なお、設定するサイズに変数を使いたい場合は、下記のように + "px"のような感じの文字列を加えて、数値に単位を付加してから代入します。. JavaScriptを使って画像の表示サイズ(横幅や高さ)を調べたり、画像の表示サイズを再設定(＝リサイズ)するには、Imageオブジェクトのwidthプロパティやheightプロパティを使います。 例えば、 1. このサイトについて, このページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。 targetImg.style.height = nsH + "px"; targetImg.style.height = "250px"; 上記のように、600pxや250pxのように単位「px」を加えた文字列を代入します。 var Msg = "画像の表示サイズは、横 " + targetWidth + " ×縦 " + targetHeight + " です。"; 現在の表示サイズを知りたければ、widthプロパティやheightプロパティの値を取得するだけです。 2. targetImg.style.width = nsW + "px"; というわけで以下に、画像の縦横比を無視してリサイズする方法と、画像の縦横比を維持した状態でリサイズする方法の2種類を紹介します。, あ、その前にまずは、画像の表示サイズを取得(してアラートボックスに表示)する方法も参考までに紹介しておきます。, ウェブページ上に掲載されている画像の「現在表示されているサイズ」を調べるには、横幅はwidthプロパティを、高さはheightプロパティを参照するだけで済みます。 var targetImg = document.getElementById('SampleImage2'); , HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるため、CSSで画像サイズが指定されている状況では、JavaScriptでwidthプロパティやheightプロパティを変更しても表示に反映されません。 var targetHeight = targetImg.height; }, 縦横比を維持した状態でリサイズされます。 Canvas.width - キャンパスの横幅を取得、変更する. var targetWidth = targetImg.width; function resizeBoth( nsW , nsH ) { targetImg.width = newsize; var targetImg = document.getElementById('sampleImage'); ExcelやWordで画像を半透明にしたいだけなのに。。。ってことで備忘録かねてやってみる... MacのiMovieでは画像または動画を2つまでしか同時に表示できない.つまり同時に流せる動画は2つまで. 実際に表示すると以下のようになります。, function resizeByWidth( newsize ) { 現在以下のような書き方で、webページ上のdivの幅を、ボタンを押す事によって動的に変更しています。 しかしボタンを押すまでは、二つのdivが半々のサイズになってしまいます。 ってことでメモっておく... Google Fonts APIを使ってフリーのwebフォントを自分のサービスやブログで使う, Node.jsで画像とかのファイル名を指定されたらそのファイルを送り返すようにするJavaScript, FireTV Stickで無料アプリダウンロードしようとしたら「OneClick設定の請求先住所が設定されていない」と言われる, Youtube投稿者が視聴者に関して見れる情報は何があるか見てみる(Youtube Studio), HTMLで複数の画像を選択してそれをアップロードせずにローカルに表示(JQuery, JavaScript), 英語/日本語とヒエログリフを簡易変換するThoth Hieroglyph Converter HieroAlphaをちゃちゃっと作った, Amazon Musicで音楽再生しようとしてもできない「Chromeをアップデート」, Formタグを使わずFormDataでシンプルに画像をアップロードする(HTML, JavaScript). targetImg.height = orgHeight * (targetImg.width / orgWidth); ※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット＆PC用デザインになります。横幅920px以上での閲覧がお勧めです。ただし、古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。. どの後はボタンを押す事によって処理が分かれるという動きにしたいのですが、 普段何気なく見ているYoutubeの見ている人の様々な情報を蓄積して分析し... 意外とやりたいときにこれができないってつまりことが多い。 var orgWidth = targetImg.width; 投稿日: 2016/03/03 / 更新日: 2016/03/03 JavaScriptの、Canvasオブジェクトのwidthは、キャンパスの描画領域の横幅を取得、変更するプロパティです。何も指定しない場合、横幅300px、高さ150pxになります。 "JavaScript Tips Factory" : Presented by Nishishi. そこでcanvasの大きさを変更するには、canvasを内包する外側のdivとかのサイズを取得してcanvasに設定して動的に変更する必要がある. }, ※なお、CSSを使って画像のサイズを指定している場合は、上記のソースでは画像サイズが変化しない場合があります。HTMLでの縦横サイズ指定よりも、CSSでの縦横サイズ指定の方が優先されるからです。その場合は、JavaScriptを使ってwidthプロパティやheightプロパティを変更するのではなく、style.widthプロパティやstyle.heightプロパティを使って変化させます。ただし、その場合は単位の付加が必要です。詳しくは末尾で紹介します。, さて、画像の縦横比を維持した状態でリサイズするには、widthプロパティかheightプロパティのどちらかにだけ値を入れた後、もう片方を同じ割合だけ変化させてやれば良いわけです。 しかしAma... 動画を投稿して初めてわかることが幾らかあったので、めもっておこうと思う. 画面サイズが変更された時に処理を行うには、.resize()を使用します。 サンプルソース 例）画面サイズ変更時にコンソールに画面サイズを出力する [crayon-5faae857b1d78417131947/] 実行サンプル 画面サイズを変更すると、現在の画面サイズを表示します。 以下のように数値だけを代入しても表示サイズは変わりません。, var targetImg = document.getElementById('sampleImage'); targetImg.style.width = 600; // 意味がない！ FireTVStickではFirefoxとかニコ動とかAbemaTVのアプリをインストールすることでそれらもテレビで見れるようになる。