私は数日間、サムネイルギャラリーを構成して、すべての画像が同じ高さと幅で表示されるようにしています。ただし、Cssコードを次のように変更すると、
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;すべて同じサイズの画像が表示されますが、アスペクト比が引き伸ばされて画像を台無しにしています。代わりに画像ではなく画像コンテナのサイズを変更する方法はありませんか？アスペクト比を維持することができます。ただし、画像のサイズを変更します。（画像の一部を切り取ってもかまいません。）
前もって感謝します！
回答:
これはCSSのサイズ変更に関する既知の問題です。すべての画像の比率が同じでない限り、CSSを使用してこれを行う方法はありません。
最善の方法は、コンテナを用意し、画像の1つのサイズ（常に同じ）のサイズを変更することです。私の例では、幅のサイズを変更しました。
コンテナーに指定された寸法（この例では幅）がある場合、画像に幅を100％にするように指示すると、コンテナーの全幅になります。auto高さでは、画像が新しい幅に対する高さの比例を持つようになります。
例：
HTML：
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>CSS：
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}片側（高さなど）を固定し、もう一方をに設定する必要がありますauto。
例えば
height: 120px;
width: auto;これは、画像を片側のみに基づいてスケーリングします。画像のトリミングが許容できる場合は、次のように設定できます。
overflow: hidden; 親要素に追加します。そうしないと、サイズを超えるものはすべて切り取られます。
overflow: hidden、余分な部分をトリミングします
object-fit次のようなcss3プロパティを使用できます
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class='holder'>
<img src='meld.png'>
</div>
<div class='holder'>
<img src='twiddla.png'>
</div>
<div class='holder'>
<img src='meld.png'>
</div>
</body>
</html>コンテナを引き伸ばすわけではないため、これは正確には答えではありませんが、ギャラリーのように動作し、imgそれ自体をスタイル設定し続けることができます。
このソリューションのもう1つの欠点は、css3プロパティのサポートが不十分なことです。詳細については、http：//www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/をご覧ください。jQueryソリューションもそこにあります。
画像を引き伸ばしたくない場合は、オーバーフローせずにdivコンテナーに合わせ、必要に応じてマージンを調整して中央に配置します。
<div id="app">
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
</div>div#container {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 4px;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}transform: scale(0.5);<div>Normal</div>
<div class="scaled">Scaled</div>div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}参照：https : //developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale