CSSで画像を拡大したい

もののけ 2000/05/24(水) 12:01:10

<img src="～" width="xxx" height="yyy" alt="～" class="picture">
が無数にあるHTMLがあります。xxxとyyyは原寸のピクセル数です。
これをcssの一撃で
<img src="～" width="200%" height="200%" alt="～">
相当にすることはできないでしょうか？

Syn [E-Mail] 2000/05/24(水) 12:22:20
<style>

</style>

で

<img class="double-size" src=...>

とすればいいようですが、 CSS1 では width と height は length
の値しか取れない (percentage がない) ので % 指定はできません。
CSS2 なら % 指定できるのですが、ブラウザが適合しているかどう
かはやってみないとわかりません。

偽 2000/05/24(水) 12:33:19
そもそも、CSSに於けるwidthプロパティとheightプロパティはボックス
モデルのサイズを決めるものであってimgに適用したところで相対サイズ
が得られるとは思えないんですけど。

ところで、蛇足ですがクラスが"double-size"(２倍)なら、200%ではなく
141%ではないかと。
あと、クラス名にハイフンって使えましたっけ？

Syn [E-Mail] 2000/05/24(水) 12:45:42
> CSSに於けるwidthプロパティとheightプロパティは

ブロック要素と、置換要素 (画像とか) に指定できるので、 img
要素にも適用できます。 CSS1 の仕様書には実際 img 要素に適用
する例が出ています。
で、相対サイズは値に auto を指定したときの数値 (内在寸法) に
対しての相対指定となります。
内在寸法の取得方法は CSS では未定義ですが一般には画像の元の
サイズでしょう。

> ところで、蛇足ですがクラスが"double-size"(２倍)なら、200%
> ではなく141%ではないかと。

ひー(^_^; そうですね。 quadruple とかにすればよかったか。

> あと、クラス名にハイフンって使えましたっけ？

あう、使えると思い込んでました。
CDATA ってハイフン含まれないんでしたっけ?

偽 2000/05/24(水) 13:23:09
> ブロック要素と、置換要素 (画像とか) に指定できるので、 img
> 要素にも適用できます。 CSS1 の仕様書には実際 img 要素に適用
> する例が出ています。
そうでしたか、それは失礼しました。
ところで、この方法だと画像を読み込むまでレイアウト組めませんよね、ブラウザは。
別に、どうでもいいんですが。

>> あと、クラス名にハイフンって使えましたっけ？
> あう、使えると思い込んでました。
> CDATA ってハイフン含まれないんでしたっけ?
いや、使えないような気がしたから書いただけで、本当に使えないかどうかは俺もあまり自信ありません。
使えたらごめんなさい。

Syn [E-Mail] 2000/05/24(水) 13:31:36
> ところで、この方法だと画像を読み込むまでレイアウト組めませ
> んよね、ブラウザは。

そうなりますが、とりあえず仮に値を決めといて、サイズが確定し
てからレイアウトを変えるとゆー実装で問題ないと思います。
動的にレイアウトが変わるのはブラウザのウィンドウサイズを変更
しても起こりえることですし。

> 使えたらごめんなさい。

こちらこそすみません、質問に質問で返事してしまって。

もののけ 2000/05/24(水) 13:58:26
[[解決]]

img { width: 200%; height: 200% }
で試したところ、IE5ではブラウザのサイズに対する比率として解釈され、
2つの%値を同じにしても、WとHの比率が保存されませんでした。
でも、Gekkoで試したらWとHの比率は保存されたまま、ブラウザのリサイズに
伴って拡大縮小されました。
とりあえず、今のところ質問の目的は大量に所有している小さな画像を拡大して見たい
という個人的欲求であり、公開が目的ではないので、Gekkoで見ることで解決しました。
一応解決にしておきます。
お二方、ありがとうございました。

Syn [E-Mail] 2000/05/24(水) 14:20:04
いま、 IE5.01 と Mozilla M16 Nightly (2000052208) で試してみ
ました。
IE5.01 はもののけさんのおっしゃるとおり、 % 指定はブラウザの
ウィンドウサイズに相対する値になり、超巨大画像になってしまい
ます(-_-;
Mozilla のほうは、指定が無視されたみたい (CSS1 相当の動作)
なんですが、もののけさんのほうは相対指定できたようですね…
挙動が変わったのかな?

うーん、画像サイズが固定なら絶対数値で指定したほうがよさそう
ですね。画像サイズがばらばらなら… 画像管理ソフトの出番!?(^^;

[上に] [前に] [次に]