写真をHTMLでサイズ変更して縦横比を維持する

アップロードした写真を自分のDrupalサイトに表示したいのですが、写真を小さくしたいのですが、heigh = 100を使用しても縦横比が優先されません。私がしたいのは写真のズームを小さくすることだけです。

幅または高さのみを指定し、両方を指定しない場合は、縦横比は維持されるので、誤って width=100% か何か。 FirebugまたはSafariのインスペクタを使って要素を調べます。

ユーザーが投稿したパノラマ写真など、4：3または3：4ではない写真に何が起こるのか心配な場合は、両方の max-height そして max-widthまたは overflow: none; 包含ブロック上。

これはスタイルシートを使って実現できます。まず、以下のスタイルを定義します。

.thumb {
  max-width: 100px;
  max-height: 100px;
  width: expression(this.width > 100 ? "100px" : true);
  height: expression(this.height > 100 ? "100px" : true);
}

次に、このスタイルを画像タグに追加します。

<img class="thumb" ...>

含まないでください height そして width 今回は要素。

そのスタイルの前半は、をサポートしているブラウザ用です。 max-width そして max-height プロパティ - Chrome、Firefox、Opera、およびSafari。後半はIEのハックですが、そうではありません。

ソース： 画像の最大幅と高さ

Diago、フィードバックをありがとう。

あなたがサムネイルを表示しようとしているならば、ただサイズを設定することは悪い考えです。フルサイズのイメージはまだユーザーのコンピューターにダウンロードされ、そこでサイズ変更されます。これは帯域幅とプロセッサ能力を使い果たし、あなたのサイトをロードするのを遅くします。適切なサイズのサムネイルを作成してアップロードする方がはるかに優れています。

サムネイルからのクリックスルーでフルサイズの画像を読み込むことができます - それがあなたが望んでいたものであれば。

ページのサイズを変更したい場合は、次の点を確認する必要があります。

new_width = new_height * (old_width / old_height)

画像の縦横比を維持するため。

ただし、dlamblinが指摘しているように、1つの値を変更するだけでアスペクト比は保持されるはずです。

Drupalについて言及したので、Drupalが画像を処理し操作するための様々なモジュールがあります。これは自動的に行われるように彼らはあなたがあなたのDrupalサイトを設定することを可能にするでしょう。おそらく、あなたは必要です 画像 。しかし、あなたは探索するかもしれません 画像サイズ変更フィルタ 。

コンポーザー 自動的にそれを行うことができるWYSIWYGエディタです。あなたはそれを試してみるかもしれません。

Drupalを使っているので、Imagecacheモジュールが欲しいでしょう（ http://drupal.org/project/imagecache ）あなたはrootアクセスを持っていないと言っていますが、Drupalモジュールを追加するのにこれを必要としません - あなたはあなたのDrupalサイトのftpアクセスと管理者アカウントを必要とします http://drupal.org/node/120641 ）