web-dev-qa-db-ja.com

CSSを使用して画像サイズを比例的に変更する

私はここ数日間、すべての画像が同じ高さと幅で表示されるようにサムネイルギャラリーを設定しようとしています。しかし、私がCssコードをに変更すると、

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

私はすべて同じサイズの画像を取得しますが、アスペクト比は画像を台無しに引き伸ばされています。イメージコンテナではなくイメージコンテナのサイズを変更する方法はありませんか。縦横比を維持することができます。それでも画像のサイズを変更します。 （画像の一部を切り取っても構わない）

前もって感謝します！

htmlcssgallerylightbox
88
Beaniie

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

最善の方法は、コンテナを用意し、画像の寸法の1つ（常に同じ）をサイズ変更することです。私の例では、幅をリサイズしました。

コンテナが指定された寸法（私の例では幅）を持っているならば、100％で幅を持つようにimageに言うとき、それはそれをコンテナの全幅にします。高さの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;
}
156
jackJoe

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

例えば

 height: 120px;
 width: auto;

それは片側だけに基づいて画像を拡大縮小します。画像をトリミングしても問題ない場合は、次のように設定します。

overflow: hidden;

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

35
Nick Andriopoulos

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ソリューションもそこにあります。

21
dmitry_romanov

画像を調整可能/柔軟にするには、これを使用できます。

/* fit images to container */
.container img {
    max-width: 100%;
    height: auto;
}
8
Stanislav

あなたの所有者の背景としてそれを置きます。

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

これはあなたのイメージを120x120 divの中央に置き、余分なイメージを切り落とします

5
DickieBoy

アスペクト比がわかっている場合は、パーセンテージでpadding-bottomを使用して、diffのwithに応じて高さを設定できます。

<div>
   <div style="padding-bottom: 33%;">
      i have 33% height of my parents width
   </div>
</div>
0
reco