web-dev-qa-db-ja.com

HTMLで写真のサイズを変更し、アスペクト比を維持します

（drupalサイトに）アップロードした写真を表示したいのですが、写真を小さくしたいのですが、heigh = 100を使用してもアスペクト比が尊重されません。やりたいことはすべて写真のズームを小さくします。

imageshtml
5
thegreyspot

幅または高さのみを指定し、両方を指定しない場合は、アスペクト比が保持されるため、誤ってwidth=100%などを継承している可能性があります。 FirebugまたはSafariのインスペクターで要素を検査します。

ユーザーが投稿したパノラマ写真など、4：3または3：4以外の写真がどうなるか心配な場合は、max-heightとmax-widthの両方を検討するか、または包含ブロックのoverflow: none;。

3
dlamblin

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

.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のハックですが、そうではありません。

出典： 画像の最大幅と高さ

フィードバックをありがとう、ディアゴ。

10
i-g

サムネイルを表示しようとしている場合は、サイズを設定するだけではお勧めできません。フルサイズの画像は引き続きユーザーのコンピューターにダウンロードされ、そこでサイズ変更されます。これにより、帯域幅とプロセッサパワーが使い果たされ、サイトの読み込みが遅くなります。適切なサイズでサムネイルを作成し、それらをアップロードする方がはるかに優れています。

フルサイズの画像は、サムネイルからクリックスルーでロードできます-それが必要な場合。

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

new_width = new_height * (old_width / old_height)

画像のアスペクト比を維持します。

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

4
ChrisF

Drupalについて言及しているので、画像を処理および操作するためのDrupalのさまざまなモジュールがあります。これらを使用すると、Drupalサイトを構成して、これが自動的に実行されるようになります。ほとんどの場合、 画像 が必要です。ただし、 画像サイズ変更フィルター を調べることもできます。

1
fgranger

Kompozer は、それを自動的に実行できるWYSIWYGエディターです。あなたはそれを試してみるかもしれません。

0
alpha1

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

0
Mark B