人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

HTML で
<img src="??" width="300"
と書けばどんなサイズの画像でも横幅を300pxに抑えることが出来ますよね?

どんなサイズの画像だとしても横幅300px以内,縦300px以内の大きさに抑えて表示させたいのですが、可能でしょうか??

●質問者: yamazakiis
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML SRC サイズ 画像
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

1 ● AMERICAN
●18ポイント

画像の形式のよって、見れないパソコンもあるかもしれませんが、

ほぼ見る事が出来ますよ!

ただ、大きさではなくファイルのサイズ(メガバイトなど…)が大き過ぎるものは、表示に時間がかかったり見れない場合もあります。

タグ

<Img Src="???" Width="300" Height="300">

<>は<>に換えて使ってください。

http://heo.jp/tag/href/imgsrc.html

◎質問者からの返答

元画像の縦横比を保ちたいんですよねぇ。


2 ● toku4sr4agent
●17ポイント

可能だと思います。

ただし、

<img src="hatena.jpg" width="300" height="300">

と指定した場合、

仮に元の画像の縦横比が1:1ではない場合、ゆがんで見えてしまいます。

ですので、なるべく元の画像の縦横比とあうように縮小されたらよいと思います。


例えば元の画像:600×400なら

width="300" height="200"

という感じです。

ただ、web上にアップロードした画像を表示させるのでしょうから、

ある程度、画像ソフトなどで縮小してから使用されたほうが無難かもしれません。

◎質問者からの返答

どんな画像だとしても(元の画像サイズが分からなくても)出来るようにしたいのです


3 ● toku4sr4agent
●17ポイント

ちなみに、

画像が大きすぎて困る場合の方法です。


はてなではありませんが、

http://okwave.jp/qa1863396.html

にヒントがあります。


>このソフトで「変形」→「伸縮と傾き」と選択していくと、

>写真そのものの大きさを小さくすることは可能です。


ここで「水平方向」「垂直方向」のいずれも、同じパーセンテージ(例えば両方とも50%に指定)

とすれば縦横比は保たれます。


参考までに、

http://d.hatena.ne.jp/toku4sr4agent/20061130

に掲載している写真は、(元の写真は1600×1200ですが)

上記のような方法でリサイズしたものです。

◎質問者からの返答

ソフトで操作ではなく、どんな画像だとしてもHTMLで解決したいのです。


4 ● wizemperor
●17ポイント

>どんなサイズの画像だとしても横幅300px以内,縦300px以内の大きさに抑えて表示させたいのですが、可能でしょうか??

可能です。

toku4sr4agentさんの回答と同様です。

>HTML で

>どんな画像だとしても(元の画像サイズが分からなくても)出来るようにしたいのです

>ソフトで操作ではなく、どんな画像だとしてもHTMLで解決したいのです。

これは不可能です。

あらかじめサイズを調整しておくのが無難だと思います。

PHPやJavaScript(JS)を使用して良い条件ならば、動的に処理することによって可能です。

少し古いですが、「仕組み」はわかりやすい一例です。

http://bbs.sekkaku.net/faq/121.html

JSならば、同様に、

・JSで画像の幅と高さ(imgのwidth/heightにはオリジナルのサイズを指定しておく)を取得

・幅か高さが300pxを越えていたら大きい方を300pxに縮小

・縮小率(300px÷オリジナルサイズ)に合わせてもう一方も縮小

・imgのwidth/heightを書き換える

という手順で可能です。


5 ● kn1967
●17ポイント

HTMLだけであれば、

(1)横長の画像

<img id="pic1" src="ファイル名" width="300" height="auto">

(2)縦長の画像

<img id="pic1" src="ファイル名" width="auto" height="300">

のいずれかしかできないです。


縦長なのか横長なのかが事前に判らない場合は、

(1)JAVAScriptなどを使ってクライアント側で動的に変更

(2)CGIによってサーバー側で画像を加工

といったような手段が必要になってきますが、環境に依存するだけでなく、負荷も大きいので、実際にはどちらも使わずに事前にサイズ調整するものですけど、、、、


1-5件表示/8件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ