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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

Q&A

解決済

4回答

250閲覧

HTMLの画像の大きさについて

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

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

CSS

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

0グッド

0クリップ

投稿2018/01/02 06:50

皆様お疲れ様です。

HTMLの中に画像イメージを挿入することがあると思いますが、その時、画像は
ある程度、使う場所や領域の大きさに切り取ったりしてから使っていますか?

ダウンロードしたものを、そのまま使うと、imgタグ内やcssでwithやhightを設定した
だけでは、余白ができてしまったり、領域からはみ出してしまったりとしてしまうもんで。

こんな感じ↓
イメージ説明

イメージ説明

よろしくお願い致します。

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

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

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

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

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

guest

回答4

0

HTMLの中に画像イメージを挿入することがあると思いますが、その時、画像は

ある程度、使う場所や領域の大きさに切り取ったりしてから使っていますか?

当然です。

もしあなたがお客さんで、納品されたものがそんな状態だったらクレーム言いませんか?

見た目はもちろんですが、画像については大きいものをそのまま使ったりすると、通信料が多すぎてロードに時間もかかりますし、モバイル通信ではできるだけ閲覧者に対する配慮があってしかるべきだと思います。

投稿2018/01/02 06:58

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

0

ベストアンサー

デザイン上の問題でもありますが、質問者さんがご自分で思っているとおり

ダウンロードしたものを、そのまま使うと・・・余白ができて・・・領域からはみ出して・・・

このようにしない為に、他の回答にもありますが、「当然」切り取ったりして、「キチンとサイズ調整」して使います。

状況により画像を、ハミ出させたり、余白を作ったりしますが、その場合もサイズ調整を行って、あくまでも「意図したデザイン」としての使用です。

そうで無い場合は、「何これ?ちゃんと揃えてよ!」って言われておわりです。

投稿2018/01/04 02:25

yoshinavi

総合スコア3521

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

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

0

画像サイズは、サービスの表示レスポンスに大きな影響を
与えます。
また、近年のWebサービスでは、いわゆるレスポンシブデザインであったり、クロスデバイス対応であったりで画像サイズの制御が特に重要です。

レスポンシブデザインでは、『フルードイメージ』というテクニックを用いて画像のアスペクト比を保ったまま自由にサイズを調整することができます。
その設定ですが、imgタグに対して以下の設定を行ってください。
img{display:inline-block;vertical-align:top;width:100%;height:auto;}

※尚、私の経験上の画像のバグ対策や汎用性を考慮した設定として、display:inline-block;とvertical-align:top;を追加しております。フルードイメージの設定はwidth:100%;height:auto;のみです。

また、素材として使うイメージのサイズはサービスの対象デバイスにも依りますが、スマートデバイスの場合はレティーナなどの画面解像度の高いデバイスで鮮明に表示するためにデバイスの画面サイズの2倍の幅で設定することが一般的です。
ただ、4kや8kのモニタも一般化しつつあるため、今後はもしかしたらそれ以上のサイズで素材を準備する必要が出てくるかもしれません。

投稿2018/01/02 13:13

編集2018/01/02 13:16
sota_u

総合スコア88

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

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

0

CSSでimgをブロック要素にすれば余白が消えます。

htmlのコードは、どうなっていますか?

投稿2018/01/02 10:20

amaryllis

総合スコア179

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問