[解決済み] 画像のサイズはimgタグのheight/width属性とCSSのどちらで定義すべきでしょうか?重複
質問
の中で画像サイズを定義するのが良いコーディング方法なのでしょうか?
img
タグの
width
と
height
の属性は?
<img src="images/academia_vs_business.png" width="740" height="382" alt="" />
または、width/heightを使ったCSSスタイルで?
<img src="images/academia_vs_business.png" style="width:740px; height:382px;" alt="" />
それとも両方?
<img src="images/academia_vs_business.png" width="740" height="382" style="width:740px; height:382px" alt="" />
どのように解決するのですか?
私はここで流れに逆らって、コンテンツとレイアウトを分離するという原則(CSSの使用を示唆する回答を正当化するもの)が、画像の高さと幅には必ずしも適用されないと述べるつもりです。
各画像には、画像データから得られる、生来の、オリジナルの高さと幅があります。コンテンツ対レイアウトの枠組みでは、この派生した高さと幅の情報は、レイアウトではなくコンテンツであり、したがって、要素属性としてHTMLとしてレンダリングされるべきであると言えるでしょう。
これは
alt
のテキストに似ており、これも画像から派生したものと言えます。これはまた、任意のユーザエージェント(例えば音声ブラウザ)が、それをユーザに関連付けるためにその情報を持つべきであるという考えを支持するものです。少なくとも、アスペクト比は有用です("画像は幅15、高さ200")。そのようなユーザーエージェントは、必ずしも CSS を処理する必要はないでしょう。
この仕様では
width
と
height
属性は、実際の画像ファイルで伝えられている高さと幅を上書きするために使用することもできます。私は、このために使うことを勧めているのではありません。高さと幅を上書きするには、CSS(インライン、埋め込み、外部)が最良の方法だと思います。
つまり、何をしたいかに応じて、一方または他方を指定することになります。理想的には、元の高さと幅は常にHTML要素の属性として指定し、スタイリング情報はオプションでCSSで伝えるべきと思います。
関連
-
[解決済み] BootstrapのCollapse Navbarが動作しない
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] CSS 100% height と padding/margin の関係
-
[解決済み] IMGとCSSのbackground-imageはいつ使い分ける?
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] HTML5でminlengthの検証属性はありますか?
-
[解決済み] CSSでimgタグのsrc属性に相当するものを設定することは可能でしょうか?
-
[解決済み] CSS 画像サイズ、どのように埋めるために、しかし、ストレッチしない?
-
[解決済み】CSSの:before/:after疑似要素で画像の高さを変えることはできますか?
-
[解決済み】android.widget.ImageViewの幅と高さを取得する方法とは?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジャンボトロンのセンター出しは?
-
[解決済み] HTMLにおける'"'エンティティの使用法
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか?
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] HTMLのid属性とname属性の違い
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] Webサイトのブラウザタブアイコン(ファビコン)を追加する方法を教えてください。
-
[解決済み] HTML5でminlengthの検証属性はありますか?