7

私は、さまざまな解像度と縦横比のすべてのさまざまな画像を表示するサイトを持っています。CSS で画像のサイズを変更して特定の解像度にトリミングする簡単な方法はありますか? 私の目的のために、サイズ変更された画像を 280x280 にしたいと考えています。

もちろん、設定することもできます<img height = '280' width = '280' />が、これはそれを伸ばします。2 つの解像度のうち小さい方にして、正方形を作成し、中央のピクセルを取得します。たとえば、解像度が 480x200 の場合、画像の中心から 200x200 のセクションを取得します。

私はグーグルを試しましたが、役に立ちませんでした。

4

5 に答える 5

9

cssを使用した画像の「実際のトリミング」はできません。リアルクロップとは、画像が新しい値に縮小され、サイズが以前よりも小さくなることを意味します。

しかし、負のマージンまたは絶対的なポジショニングを使用したソリューションがあり、これは非常に役立ちます。私はこのテクニックを何度も使用しました。

ご覧ください： CSSを使用した画像のトリミング

于 2013-02-26T07:41:45.990 に答える
2

要素をトリミングするためのクリップ プロパティを使用できます。

数週間前に Codrops でチュートリアルを書きました: http://tympanus.net/codrops/2013/01/16/understanding-the-css-clip-property/。

于 2013-02-26T07:57:58.823 に答える
0

画像を CSS 背景として設定する場合は、background-size: cover|containを使用できます。

于 2013-02-26T07:43:35.663 に答える
-1

CSSを使用して、Webサイト上のすべての画像のサイズを設定できます。

img {
    width: 280px;
    height: 280px;
}

問題は、一部の画像がアスペクトラジオのために奇妙に見えることです。最良の方法は、画像をアップロードするときに、各画像の異なるサイズ（サムネイルと呼ばれる）を作成することです。実行時のヌート、それは時間がかかるでしょう。

于 2013-02-26T07:41:55.480 に答える