ここに私にとって最初の投稿。
div を使用してサムネイル画像をすべて同じ比率 (180wx170h) でトリミングしています。横長の画像だけでなく、縦長の画像も扱うときに行き詰まります。ポートレートスタイルの画像に適したこれを使用している場合：
.crop img {max-height:170px; width:auto}
..横向きのスタイルの画像には問題ありません：
.crop img {max-width:180px; height: auto;} is fine for landscape style images.
したがって、基本的には、横向きの場合は側面を、縦向きの場合は上下をトリミングしたいと考えています。優先順位付けされた max-height と max-width のようなものです。
これは PHP で簡単に実行できることはわかっていますが、実際には CSS しか知らないので、それが私の最初の好みです。
画像の縦横比を維持する必要があります。
他の「解決策」の負荷を経た後の解決策
max-width:100%;
max-height:100%;
height: auto;
width:auto;
編集 2019:
タグを保持したい場合は、css プロパティ<img>を調べてください。ブラウザ間でのサポートは非常に優れています。object-fit
また、幅の変更時に縦横比を維持したい場合は、padding-hackを試してください。
私が理解しているように、180x170 px のブロックがあり、それらを完全に画像で埋めたいと考えています。画像を背景に移動して使用してみてくださいbackground-size:cover。
デモhttp://jsfiddle.net/heuku/1/
<div style="background-image:url(http://placekitten.com/100/200)"></div>
<div style="background-image:url(http://placekitten.com/200/100)"></div>
<div style="background-image:url(http://placekitten.com/200/200)"></div>
div {
width:180px;
height:170px;
background-repeat:no-repeat;
background-size:cover;
}
このソリューションは IE8 以下では機能しないことに注意してください。
編集:ソリューションを改善しました。こちらを参照してください: https://stackoverflow.com/a/34774905/1663572
画像を正方形（または何でも）に合わせて中央に配置しようとしたときに見つけたこのソリューションを使用しています。padding-bottom と高さ 0 をコンテナに設定すると、固定比率で反応するようになります。
IE9 以降で動作します。IE8 以下では、いくつかの CSS ハックが必要です。
HTML
.container {
height: 0;
padding-bottom: 100%; /* Or 75% for 4:3 aspect ratio */
position: relative;
overflow: hidden;
}
.container img {
display: inline-block;
max-width: 90%; /* You can use different numbers for max-width and max-height! */
max-height: 75%;
width: auto;
height: auto;
position: absolute;
left: 50%; /* This sets left top corner of the image to the center of the block... */
top: 50%; /* This can be set also to bottom: 0; for aligning image to bottom line. Only translateX is used then. */
-webkit-transform: translate(-50%,-50%); /* ...and this moves the image 50 % of its width and height back. */
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
/* Fallback for IE8 */
@media all\0 {
.container img {
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
ここで試してみてください：http://jsfiddle.net/thiemeljiri/uhdm4fce/4/
注意:ブートストラップを使用している場合は、クラス .container を別のものに変更してください。
You could try
.crop img {max-height:170px; max-width:180px;}
Since max-height and max-width are maxima, it should work. The browser will make the image as big as possible, without going over your dimensions.
Note that this is untested, but based on this W3Schools page.
Hope this helps!!
Try:
.crop img {max-height: 170px; max-width: 180px;}