124

すべての画像が同じ高さと幅で表示されるように、サムネイルギャラリーを構成するために数日間試みてきました。ただし、CSSコードを次のように変更すると、

max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;

すべて同じサイズの画像が得られますが、縦横比が引き伸ばされて画像が台無しになります。代わりに画像ではなく画像コンテナーのサイズを変更する方法はありませんか? アスペクト比を維持しながら、画像のサイズを変更できます。(画像の一部を切り取っても問題ありません。)

4

9 に答える 9

203

これは、CSS のサイズ変更に関する既知の問題です。すべての画像が同じ比率でない限り、CSS でこれを行う方法はありません。

最善の方法は、コンテナーを用意し、画像のいずれかのサイズ (常に同じ) をサイズ変更することです。私の例では、幅のサイズを変更しました。

コンテナーに指定された寸法 (私の例では幅) がある場合、画像の幅を 100% にすると、コンテナーの全幅になります。autoat the height は、画像の高さが新しい幅に比例するようにします。

例：

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;
}
于 2013-03-28T15:27:23.483 に答える
47

片側 (高さなど) を固定し、もう一方を に設定する必要がありますauto。

例えば、

 height: 120px;
 width: auto;

これは、片側のみに基づいて画像をスケーリングします。画像のトリミングが許容できる場合は、設定するだけです

overflow: hidden;

親要素に追加すると、そうでなければそのサイズを超えるものはすべて切り取られます。

于 2013-03-28T15:23:32.657 に答える
29

object-fitCSS 3 プロパティを使用できます。何かのようなもの：

<!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 つの欠点は、まだ CSS 3 プロパティのサポートが不十分なことです。詳細については、CSS 3 Object-fit Polyfill を参照してください。jQuery ソリューションもそこにあります。

于 2013-07-08T05:23:26.403 に答える
5

あなたのホルダーに背景として入れてください。

<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height 120px;">
&nbsp;
</div>

これにより、画像が 120x120 div 内の中央に配置され、余分な画像が切り捨てられます

于 2013-03-28T15:27:39.030 に答える