0

WordPressを使ってレスポンシブポートフォリオサイトを作っています。レイアウトを壊す小さな問題があります。すべての画像は、幅 300 ピクセル、高さ 200 ピクセルです。ユーザーが上記のサイズよりも大きい画像をアップロードした場合、WordPress API を使用して画像をトリミングしました。

add_image_size( "portfolio", 300, 200, true );

これが私にとって何をするかというと、画像に属性width="300"とheight="200"属性が自動的に挿入されるということです（ただし、画像の元の寸法はサイズ変更されているだけです）これは、ブラウザウィンドウのサイズを変更しようとする場合を除いてうまく機能します..

ここにシナリオがあります:クライアントは、幅300px、高さ210pxのサイズの画像をアップロードします..最初はサイズが変更されて表示されるため、レイアウトは完璧ですが、ブラウザのサイズを変更すると、画像のサイズも変更されますが、「元の寸法"..したがって、元の高さが 210px の画像は、残りの画像よりも大きくなります..すべての画像をフローティングして 3 列のレイアウトを形成しているため、高さの違いによってレイアウトが崩れます (列をこの下に移動します)右側に大きな画像が表示され、その下に空の列が残ります。)

この問題を解決するにはどうすればよいですか? timthumb を使用して、すべての画像を表示する前にサイズを変更することを考えました。したがって、その場で画像の元の寸法を変更しますが、これは効率的な方法ではないと思いますか? この問題に対する他の解決策はありますか? また、特定のレイアウトを維持する必要があるため、jQuery Masonry のようなものは使用したくありません。

ありがとう

4

1 に答える 1

0

css の max-height ルールを使用して、すべての画像の高さを均等に制限できます。

例えば：

.gallery img{
  max-height: (some height);
}

高さには % または em を使用してください。レスポンシブ デザインではピクセルが適切に機能しない可能性があります。

于 2013-03-21T13:16:14.807 に答える