サイトに掲載の画像をコーディング→サイズが違う→合わせるには？

Question

あるサイトに掲載されている画像を勉強のために、同じように作っています。しかし、<img src="images/logo.png" width="70%" height="70%">としてみたところ、画像は持ってくることが出来たんですが、サイズについて、小さくなるはずが（７０％なので）逆に大きくなってしまっています。どうすれば保存してある画像と同じサイズのロゴにできるのでしょうか？また、もともとの画像はどのようなサイズかというのを確認する方法はあるのでしょうか？

Answer 1

もともとの画像はどのようなサイズかというのを確認する方法はあるのでしょうか？

imageタグでhtmlに埋め込まれた状態の画像だとcssなりimageタグの属性なりでもとのサイズを表示しないはずなので、画像だけを開く必要があります。
画像右クリックプロパティから画像だけを開く のようなメニューがあるはずなので、そこから直にURLを開くことができます(ブラウザにより違うとは思いますが)

そこから右クリックプロパティでもとの画像のサイズを確認することができたはず。

ただ、本来の目的が良く分かりません。
先に書いたとおりその画像はそのもとのサイト内で最適化された大きさで調整されているはずのもので、自身が作ったという画像はあくまで自身のhtml内で大きさを最適化するべきとは思います。

Comments

[B_J]

プログラミングの勉強があって、あるページと同じようにページを作るため、ゼロからコーディングするという課題なのです。ただし、右クリック→「検証」でコードを見ることは禁止です。
なので、エディタでそのページにある画像を保存して、imgで取り込んで、ひょうじしてみたのですが、サイズが違っており、なぜなのか？ということになったのです。すみません、いただいたご回答とズレておりますでしょうか？ご迷惑をおかけしすみません。勉強中ですのでご勘弁を。。。
見様見真似で、ピクセルを調整していって、サイズを合わせていきましたが、そのようにやるしかないのでしょうか？

[B_J]

また、CSSファイルもstyle.cssで作成しました。なぜなら、imgで画像を取り込みましたが、サイズはもちろん、位置も違っており、その位置を中央にしなければならないからです。そのやり方もいま、調べている最中で苦戦しております。本当に難しいですプログラミング。

[m.ts10806]

> エディタでそのページにある画像を保存して、imgで取り込んで

別のサイトであればimages/ではなくhttp://で始まる絶対パスになるのでは。結局のところ画像をダウンロードして保存してるわけですよね。

いずれにしても「もとのサイズの画像」が欲しければ回答に書いた通りにして保存してください。デベロッパツール使えないのであれば、目検でしか確認できないのでいつまでも「それっぽいもの」しかできませんが、それで良いのでしょうか。あまり学習にもならないと思います。
それなら模写よりも自身で画面設計したものを組んでみるとかのほうがレイアウト感覚は身に付きます。
質問内容の「もともとの画像サイズの取得方法」であれば回答したとおりで取得可能ですが、それはデベロッパツールを使うのとそうかわりません。
実務においてはそのような制限はありませんし、分からないものは分からないので、適宜確認して吸収するようにしたら良いのかなと。
課題なのであれば、今の実力はその段階なので、それはそれで良いと思います。

>本当に難しいですプログラミング。
HTML,CSSを「プログラミング」とするかどうかを議論し始めるとキリがないので別として、プログラミングの本質は問題解決にあると私は思ってます。
ので、難しくて当然です。問題解決のための手段、道具ですから、「書いたとおりにしか動かない」ものを「思ったように動かす」作業です。これが簡単にできないからエンジニアの仕事が成り立っています。

[B_J]

はい、問題の指示としましては、画像をまず保存してimagesフォルダに保存するという指示でした。ですので、img srcを使って保存した画像を取り込むという問題に対する指示だと思うのですが・・・・（すみません、終わるまで答えは見ないので）

画像を右クリックで開いたらURLは確かに出てくるのですが。

すみません、私の勉強不足でご迷惑をおかけしております。質問の仕方を変えます。

今回私がおこなっている方法は、img srcのコードで画像を取り込むときに、ページにあった画像を保存して、それを場所を指定してそのまま持ってくるというやり方ですよね。（ただ、今回の私のようにサイズが分からず四苦八苦してしまう問題に直面しています）

そこで、img srcのコードでご教示いただいた絶対パスを使って画像を取り込むという方法はあるのでしょうか？また、その場合も、「画像自体の保存」というのは前提として必要なのでしょうか？

もし必要だというのであれば、保存した上で、ご教示いただいた絶対パスを使って画像を取り込むというのが大正解の回答なのだということになると思いました。

しかし、必要でないのであれば、そもそも問題の指示として、「画像を保存」というアクション自体が不要ということになりますよね？

何卒宜しくお願い致します。回答をお待ち申し上げております。

[B_J]

>本当に難しいですプログラミング。
HTML,CSSを「プログラミング」とするかどうかを議論し始めるとキリがないので別として、プログラミングの本質は問題解決にあると私は思ってます。
ので、難しくて当然です。問題解決のための手段、道具ですから、「書いたとおりにしか動かない」ものを「思ったように動かす」作業です。これが簡単にできないからエンジニアの仕事が成り立っています。

こちら、ありがとうございます。おかげさまでよりプログラミングに魅力を感じるようになりました。

[m.ts10806]

基本的には他者のサイトのファイルを絶対パスで取ってくるのはよろしくありません。負荷をかけてしまいます。
「エディタで」という表現から「あれ？コードで直接取ろうとしている？」という印象を受けたまでです。
質問はあくまで「画像の保存の仕方」に焦点が当てられています。「表示されている画像」 ではなく「サーバーにアップロードされている画像」は提示したやり方でダウンロードできる可能性はありますが、本当にそれがリアルな画像であるか知る術はありません。
なぜならサーバーサイドの言語でサイズを変えて出力することも可能だからです。
ですので、widthを%ではなく固定にするとか、そういう話になってくるのではと思います。

※参照先のサイトやご自身のコード全てを提示されているわけではないのでこちらでは確認できません

[B_J]

色々と本当にありがとうございます。作成者にも確認したところ、widthやheightを使って、調整ということで合っているそうです。m.ts10806さまがご回答いただいた前回の内容についてよく意味が分からず・・・すみません・・・。

[m.ts10806]

結局どのように解決とされましたか？
いずれにしても意味が分かっていないならその場でその回答者に確認してください。
理解されないまま解決済みとするのはよろしくありません。

[B_J]

お気遣いありがとうございます。親身になっていただき感謝します。記載したとおり、保存した画像をimg srcを使って、さらに、widthやheightを使って、調整して同じぐらいのサイズに合わせるということでよろしいそうです。ありがとうございます。また今日も質問させていただくと思いますがよろしくお願い致します。

[m.ts10806]

親身になって、というか、回答した者としては単に解決したかどうか不明な状態が気になるだけです。
ガイドラインにもどう解決したかフィードバックするように推奨されています。※あくまで私はガイドラインを元に活動している色が強いだけです。
https://teratail.com/help/question-tips#questionTips4-2