htmlでサイズの大きな画像を貼り付けるのに、等倍で縮小したいんですが、簡単にできるタグって有りますか?

例えば、2000×1000ピクセルを半分にしたい場合、普通はwidth="1000" height="500"にすると思うんですが、これを一括で%で指定する方法ってないでしょうか。

width="50%"でやってみたんですが変な形につぶれてしまったので…
違うのかな、と。

ヘタな説明で分かりにくいかと思いますが、教えてください。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

なぜheightも50%にしない?

    • good
    • 0

 HTMLは、通常のサイズ(あまり大きな画像サイズは負荷が大きいので使うべきではない)で、表示したいサイズに画像を縮小して画像を貼り付けます。


 また、横幅だけウィンドウに合わせて自由に決めたいときは
<p style="position:relative;width:60%;margin:0 auto;">
<img src="images/sample04.jpg" width="480" height="360" style="display:block;width:100%;height:auto;" alt="河口湖畔から望む富士山の紅葉">
</p>
で良いはずです。ウィンドウ巾に合わせて、自在に拡大縮小されます。
 imgは置換インライン要素ですから、画像サイズに合わせて伸縮しますがブロック要素にすることで、自分が所属する親コンテナブロックの内寸を参照できるようになります。

 ポイントは、スタイルシートで、display:block;とheight:autoを指定することです。HTMLの属性、width="" height=""[詳細度(0,0,0,0)]は、その要素(ここではimg)に、スタイル属性(style="")で、それらがあれば[詳細度(1,0,0,0)]上書きされますが、後方互換(スタイルシートを認識しないブラウザのために)、一応記述すべきです。

 

 


 
    • good
    • 0
この回答へのお礼

詳細かつとても分かりやすく、参考になりました。
ありがとうございます。

お礼日時:2011/10/31 13:23
    • good
    • 0
この回答へのお礼

参考にさせて頂きます。

お礼日時:2011/10/31 13:20

<img src="xxx.jpg" style="width:50%;" alt="テスト">


上記記述でないのですか。
縮小したり拡大すうと大きさが変わりますが
    • good
    • 0
この回答へのお礼

その記述でないです。
縮小したり拡大すると大きさが変わるのはわかります。

お礼日時:2011/10/31 13:19

通常はそのような大きさの画像はディスプレイでは表示できないので、htmlタグで見た目だけ小さくしても表示に必要なデータ量は同じなのでグラフィックツール等で現実に縮小したりかなり縮小したサムネイル画像を貼るというのが一般的です。


そのサムネイル画像に元の画像にリンクを貼るか、データ容量が非常に大きくなるので圧縮ファイルにリンクを貼りダウンロードさせるのがマナーでしょう。


またへんなところでWidth=50%とすると、現在の表示されている画像解像度の半分という指定になるので注意が必要です。
    • good
    • 0
この回答へのお礼

解像度の半分になってしまうことがあるんですね…
大変参考になりました。ありがとうございます。

お礼日時:2011/10/31 13:15

このQ&Aに関連する人気のQ&A

このQ&Aと関連する良く見られている質問

Qbackground-imageにmax-width:100%;height:auto;を適用したい

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100%;
height:auto;
}
とすると、(font-size:10px;で適用確認)すると、画面を越えてしまって半分ぐらいしか文字が入っていません、拡大されているのかどうかわかりませんが、max-widthが効かないようです。

何が原因でしょうか?
教えて下さい。
宜しくお願い致します。

さんたと申します
宜しくお願い致します。

仮ページで
http://carshop-glanz.com/css/test/kents-auto.com/index.html
scrollifyというJQUERY を使用してページを作っています(縦スクロールパララックス)が、
1920*1080の画像を、画像として置き、
img {
max-width:100%;
height:auto;
}
とすると、パソコンでもスマホでも画面いっぱいになります。
しかしながら、背景にしたい場合に
section.sec_1 {
background-image:url(../images/kents-auto57.jpg);
font-size:10px;
max-width:100...続きを読む

Aベストアンサー

背景にはそんなプロパティ有りません。coverプロパティを使う。

Qfirefoxで「height: 100%;」と指定しているのに100%にならない

<html>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td rowspan=2 style="height: 10px;">
<a href="#" style="display: block; height: 100%;">

</a>
</td>
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</body>
</html>

上記のソースで「う」のリンクをセル全てに指定したいです。
IEやchromeではセル全てがリンクになりますがfirefoxは外側の「height: 10px;」の高さしか
リンクになりません。
どうすればfirefoxでもセル全てがリンクになるのでしょうか。

<html>
<body>
<table border=1>
<tr>
<td>
<table border=1>
<tr>
<td rowspan=2 style="height: 10px;">
<a href="#" style="display: block; height: 100%;">

</a>
</td>
<td>

</td>
</tr>
<tr>
<td>

</td>
</tr>
</td>
</tr>
<tr>
<td>

</td>
</tr>
</table>
</body>
</html>

上記のソースで「う」のリンクをセル全てに指定したいです。
IEやchromeではセル全...続きを読む

Aベストアンサー

こんにちは。
height: 100%ってそもそも融通聞かないんですよね。親要素の高さ指定が必ず必要な上、それが基準となり影響してきます。

ソースを見るとaの親要素のtdに10pxと指定しているので、これが基準でaも10pxにしかならないのだと思います。
考えてみれば、囲っている親要素より大きくないのが普通です。
今回はrowspanが絡んできていておかしなことになっているので、本来はFireFoxが正しいのだと思います。

この場合、
①親要素のtdに実際必要な高さ分のpx数を記述するか、
②aのheight:100%を諦め実際に必要な高さ分のpx数を記述するか、
③もし何かしらの理由で(変動するとか)HTMLやCSSに実数を記述できないのであれば、jQueryで親要素のtdの実際(ブラウザ上で表示されている)の高さを取得してaに適用するか

この3つしかないと思います。ただしメルマガとかのソースだと③は無理かも。

ちなみにjQueryの場合は以下の感じ。
ただしクラスを設定していないので、他にこのaとtdのような関係性のところ全てに適用されるので必要に応じてクラス指定が要ります。
【jQuery】
<script>
$(function () {
hsize = $("a").parent().height();
$("a").css("height", hsize + "px");
});
</script>
【説明】
aの親要素の高さを取得
aのcssに取得した高さを実行

tableって表以外は本来使わないほうが良いのですが、例えばECサイト運営とかメルマガのお仕事だと、結構無理やり使ってるところが多いですよね…

頑張ってください。

こんにちは。
height: 100%ってそもそも融通聞かないんですよね。親要素の高さ指定が必ず必要な上、それが基準となり影響してきます。

ソースを見るとaの親要素のtdに10pxと指定しているので、これが基準でaも10pxにしかならないのだと思います。
考えてみれば、囲っている親要素より大きくないのが普通です。
今回はrowspanが絡んできていておかしなことになっているので、本来はFireFoxが正しいのだと思います。

この場合、
①親要素のtdに実際必要な高さ分のpx数を記述するか、
②aのheight:100%を諦め実際に必...続きを読む

Qbodyにwidth:100%をつける理由は?

bodyにwidth:100%をつける理由は?


たまに、bodyにwidth:100%をつけているのですが、理由がわかりません。

boduのwidthはブラウザの横幅ではないのでしょうか?

実際、下記コードで、両方とも結果は同じです。

<body style="background:red;width:100%">
aaaa
</body>

<body style="background:red;width:50%">
aaaa
</body>

どなたかお教えいただければ幸いです。

Aベストアンサー

こんなところで聞いたってまともな答えは得られない。なぜ仕様書を確認しないのですか??
4.3.3 パーセント値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#percentage-units )
6.1 指定値、算出値、実効値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#value-stages )
8 ボックスモデル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html )
10.2 内容の幅: 'width'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-width-property )
 特に「10.1 "包含ブロック"の定義」

 これだけの情報が絡むので、ここで説明しきれる内容ではありません。
bodyに幅を指定しても、その祖先にstaticでない参照すべき親コンテナブロックがないのですから無意味です。
html{margin:20px;position:relative;}
body{width:50%;margin:0 auto;}

 仕様書だけはかならず目を通しておきましょう。そうしないとつまらないところで足踏みしてしまう。

<body style="background:red;width:100%">
aaaa
</body>
 こんなHTMLはありえません。こんなことしてるとだめです。bodyにはブロック要素しか置けません。
<!ELEMENT BODY O O (%block;|SCRIPT)+ +(INS|DEL) -- document body -->( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-BODY )
それがないため、ブラウザは匿名ボックスを作ってしまいます。そうすると、スタイルシートがうまく機能しなかったり・・
 ⇒メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。.( http://jigsaw.w3.org/css-validator/#validate_by_input )

こんなところで聞いたってまともな答えは得られない。なぜ仕様書を確認しないのですか??
4.3.3 パーセント値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#percentage-units )
6.1 指定値、算出値、実効値( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#value-stages )
8 ボックスモデル( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html )
10.2 内容の幅: 'width'プロパティ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/visudet.html#the-...続きを読む

Qパララックスのheight100%

宜しくお願いします。初心者な質問ですみません;
紙芝居風のjqueryでトップページ(扉風)がパカっと割れて、
下のページがでてくるようにしたいのですが、
トップページのみheight100%で、
下に表示されるコンテンツページは内容をスクロールして見ることは、
不可能なんでしょうか?
height100%だと、スクロールできないということなんですよね?
よろしくお願いしますm(==)m

Fullscreen Slit Slider with jQuery and CSS3
http://coliss.com/articles/build-websites/operation/work/tutorial-fullscreen-slit-slider-by-codrops.html


【CSS】ボックスを[height:100%;]で画面全体に表示させる方法。
http://on-ze.com/archives/1431

Aベストアンサー

slider部分のheightにvhを使用して、画面の大きさだけに固定するのではダメなのでしょうか。

http://dev.classmethod.jp/ria/html5/css-length-viewport/

QTableコーディング widthがうまく設定できません。

Tableコーディングをしていますが、うまくwidthの設定ができません。


以下ソースコードのテーブル部分になります。(html4で組んでます。)
<table cellspacing="0" cellpadding="0" width="780">
<tr><td colspan="3"><img src="Banner_big.jpg" width="780" height="200"><td></tr>
<tr><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td><td width="6"></td><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td></tr>
</table>

したい事としては、780px内に正確に小さい画像を2つ入込みたいのですが、画像が添付画像のようにずれてしまい<td width="6"></td>が大きくしまっているようです。

<td width="6"></td>を取れば、うまく画像は並ぶのですが、勉強を含め理解したいという目的もあります。

解決方法や、論理的な説明、大変申し訳ございませんがどなたかお願いできないでしょうか?

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

Tableコーディングをしていますが、うまくwidthの設定ができません。


以下ソースコードのテーブル部分になります。(html4で組んでます。)
<table cellspacing="0" cellpadding="0" width="780">
<tr><td colspan="3"><img src="Banner_big.jpg" width="780" height="200"><td></tr>
<tr><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td><td width="6"></td><td width="387"><img src="Banner_small.jpg" width="387" height="200"><td></tr>
</table>

したい事として...続きを読む

Aベストアンサー

>Yahooストアにバナーを貼る為に、tableを組んでいました。
 それを先に言ってくれなきゃ・・(^^)

 なら、単純にHTMLの書き間違い。
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <td>
 </tr>
 <tr>
  <td width="387">
   <img src="Banner_small.jpg" width="387" height="200">
   <td>
    <td width="6"></td>
    <td width="387">
     <img src="Banner_small.jpg" width="387" height="200">
     <td>
  </tr>
</table>

だとブラウザは
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <table>
    <tr>
     <td>
     <td><!-- 補完 -->
    </tr>
    <tr>
     <td width="387">
      <img src="Banner_small.jpg" width="387" height="200">
     <table><!-- 補完 -->
      <tr><!-- 補完 -->
       <td width="6"></td>
       <td width="387">
        <img src="Banner_small.jpg" width="387" height="200">
        <table><!-- 補完 -->
         <tr><!-- 補完 -->
          <td>
          </td><!-- 補完 -->
         </tr>
</table>

>Yahooストアにバナーを貼る為に、tableを組んでいました。
 それを先に言ってくれなきゃ・・(^^)

 なら、単純にHTMLの書き間違い。
<table cellspacing="0" cellpadding="0" width="780">
 <tr>
  <td colspan="3">
   <img src="Banner_big.jpg" width="780" height="200">
   <td>
 </tr>
 <tr>
  <td width="387">
   <img src="Banner_small.jpg" width="387" height="200">
   <td>
    <td width="6"></td>
    <td width="387">
     <img src="Banner_small.jpg" wi...続きを読む

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード


このカテゴリの人気Q&Aランキング

おすすめ情報