画像の縦横の比率を16:9に拡大縮小する方法。

Question

画像の縦横の比率を16:9に拡大縮小するために、http://bashalog.c-brains.jp/15/08/17-100000.phpのサイトに書いてあるコードを参考にして、幅が640px、高さが360pxの16:9の大きさにしようとcssで以下のコードを書きました。

#imagearea {
position: fixed;
margin: 200px 0 0 80px;
z-index:1;
display: table-cell; /上下中央/
width: 640px;
height: 360px;
text-align: center; /左右中央/
vertical-align: middle; /上下中央/
}

#image {
width:auto;
height:auto;
max-width:640px;
max-height:360px;
}

しかし、このコードを実行したところ画像の大きさは変わりませんでした。
autoが機能してないように思い100%にしたところ、画像の大きさは変化しましたが、上のサイトのようにはなりませんでした。どうすればよいか教えていただけると嬉しいです。また他の方法があればぜひお願いします。

Answer 1

「imagearea」はHTMLタグではなくてCSSクラスですよね？
ドットを書き忘れただけかも知れませんが、このままでは動作しないように思います。

次にリンク先のサイトのCSSは、
・横120px以下且つ縦150px以下の画像はそのままの大きさでdtエリア縦横中央に配置
・横長で横120px以上の画像は横120pxの相似形に縮小してdtエリア上下中央に配置
・縦長で縦150px以上の画像は縦150pxの相似形に縮小してdtエリア左右中央に配置
しようとするもので、「画像の縦横の比率を16:9に拡大縮小する」というのとは異なります。
比率を変更すると画像は歪みますよ？
リンクサイトのCSSは比率を保ったまま縮小しようとしています。

このコードを実行したところ画像の大きさは変わりませんでした。

以上のことからこうなった原因は、
・クラスと認識されていなくて動作していないか
・「横640px以下且つ縦360px以下の画像」だったか
・リンク先のページがやろうとしている事を正しく把握できていなかったか
のどれかだと思われます。

Comments

[退会済みユーザー]

詳しい回答をありがとうございます!
原因はhirohiroさんのおっしゃるとおり
・「横640px以下且つ縦360px以下の画像」だったか
・リンク先のページがやろうとしている事を正しく把握できていなかったか
でした。
迅速に回答していただき、本当にありがとうございました!