1223345285 大きな画像をウェブページで一片を最大650pxに自動縮小して表示できるようにしたいのですが,どう記述すれば良いのでしょうか?「max-width」を指定すれば良いのでしょうか?

回答の条件
  • 1人2回まで
  • 登録:2008/10/07 11:08:06
  • 終了:2008/10/14 11:10:03

回答(3件)

id:atmarkbienna No.1

atmarkbienna回答回数61ベストアンサー獲得回数32008/10/07 12:16:30

ポイント27pt

(画像を強制的に縦横650PXに変換して表示)

みたいなのとは違うんですか?

http://www1.hatena

id:atmarkbienna No.2

atmarkbienna回答回数61ベストアンサー獲得回数32008/10/07 12:18:13

ポイント27pt

すいません。HTMLタグを直書きしたのでちゃんと表示されてないみたいです。

<img src="" style="width:650px;height:650px;" />

のミスです。

id:en-do

そういうのじゃないんです

説明が下手ですみません

自分のサイトで画像をランダムに表示される「フォト・ギャラリー」的なページが有りまして

そのページは5秒ごとに次の画像が表示されるようになってるんです

ただ

このページの短所が

大きな画像だと上下にスクロールしないと

画像全体が見えない点なんです

ですので

自動的に画像が650px以内に縮小されれば

スクロールの必要が無くなるかと

はてなダイアリーではフォトライフ画像の横幅が自動縮小されるようになってます

それと同じようなものですが

CSSの記述方法が良く分からないのです

本文幅が固定されているデザインテーマで、大きな画像が貼り付けられた場合はサイズを自動縮小するようになりました - はてなダイアリー日記

http://d.hatena.ne.jp/hatenadiary/20080717/1216286525

2008/10/07 15:14:57
id:harasima No.3

harasima回答回数128ベストアンサー獲得回数72008/10/07 15:50:18

ポイント26pt

そちらのフォトライフ画像と同じ条件であれば、はてなのスクリプトが参考になるかと思いますが、それでは駄目なのでしょうか?


ソースを辿ってみると、

DIV.main DIV.section IMG.hatena-fotolife {
	max-width: 517px
}

<SCRIPT src="/js/max_width_fotolife.js" type=text/javascript></SCRIPT>

とあって、http://d.hatena.ne.jp/js/max_width_fotolife.js に本体スクリプトがあります。

(max-width はIEでは使えないようです)

id:en-do

 

2008/10/07 18:05:31
  • id:en-do
    ¥・ω・do 2008/10/07 18:05:04
    質問内容が分かりにくいと思うので・・・



    自分のサイトで画像をランダムに表示される「フォト・ギャラリー」的なページが有りまして
    そのページは5秒ごとに次の画像が表示されるようになってるんです


    ただ
    このページの短所が
    大きな画像だと上下にスクロールしないと
    画像全体が見えない点なんです


    ですので
    自動的に画像が650px以内に縮小されれば
    スクロールの必要が無くなるかと



    <meta http-equiv="refresh" content="5">





    var icnt = ●;
    var myDate = new Date();
    var d = myDate.getSeconds();
    var idx = d % icnt;
    var bnr=new Array();
    var lnk =new Array();
    bnr[●]="●";
    document.write('●');


    で5秒ごとに画像をランダム表示させています



    CSSを記述すれば画像の自動縮小は可能ですか?
    スクリプトが必要ですか?
  • id:en-do
    ¥・ω・do 2008/10/07 18:10:20
    <link rel="alternate" media="handheld" href="http://f.hatena.ne.jp/mobile/" />
    <script type="text/javascript" src="/js/foto_centering.js"></script>
    <script type="text/javascript">
    $FR.wsize = 60;
    $FR.hsize = 60;
    $FR.size = 120;
    </script>
    <script type="text/javascript" src="/js/element_size_observer.js"></script>
    <script type="text/javascript" src="/js/swfobject.js"></script>
    <script type="text/javascript" src="/js/top_slideshow.js"></script>


    「http://f.hatena.ne.jp/」のソースに有りましたが
    こういうスクリプトが有れば
    画像の自動縮小が可能なのでしょうか?
  • id:harasima
    うーむ、すいません、早合点してしまいました。 はてなはかなりスクリプトファイルが散在していてかなりの労力使うのですね。

    考え方としては、画像ファイルの大きさを取得して、条件によってスクリプトなどで縮小してやる、
    というのを思いつきますが、”画像ファイルの大きさを取得”がネックなようです。一度ページに表示させてやればエレメントとして属性の一つとして大きさが取得できるようですが、
    ・onloadなどで縮小処理の際に一瞬デカイ画像が出そうな気がする
    ・ダイナミックHTMLであらかじめ隠しておいてという手もあるが、、
    ・結局ブラウザ互換を考えなければならないので、一朝一夕には・・・・
    ・そもそも、はてなのスクリプトを辿っても画像サイズがCGIなどで既にサーバーに格納されてる可能性もあって、確実性に疑問

    ということで、安易な回答してすいませんでした。



    因みに私ならブラウザ互換性云々も最大の理由として、固定サイズといわずブラウザや画面サイズにも対応できるようにCGIスクリプト書いてしまうか(・そのままアップした画像データをサーバ内で処理 ・ローカルで画像サイズを別ファイルに対応表を作ってそれをCGIで読み出してスクリプトに渡す)、ローカルでサイズ統一してしまう方法をとるでしょう。フリーソフトなどでバッチ処理で簡単にできてしまうので。
    www.vector.co.jp/magazine/softnews/050713/n0507133.html

    あとは、殆ど使用したことありませんがFLASH利用でしょうか。安価なものやフリーで機能限定で作成できるソフトはあります。
    www.forest.impress.co.jp/article/2006/11/30/suzuka.html
    flash1234.net/script/slideshow/as40.html (ファイル読み込み部分をランダム化すれば良いかと)



    回答になっていませんが、何かのご参考までに。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません