168

このスレッドを見つけました —画像の縦横比を維持しながら <div> を埋めるために画像をストレッチするにはどうすればよいですか? —それは私が望んでいることではありません。

特定のサイズの div とその中に画像があります。画像が横長か縦長かに関係なく、常にdiv に画像を入力したいと思います。また、画像が切り取られていても問題ありません (div 自体にオーバーフローが隠されています)。

したがって、画像が縦長の場合は、縦長になりたいwidthので100%、height:auto比率を維持します。画像が横向きの場合は、自動heightにしたいです。複雑ですね。100%width to be

<div class="container">
   <img src="some-image.jpg" alt="Could be portrait or landscape"/>
</div>

どうすればいいのかわからないので、私が言いたいことの簡単なイメージを作成しました。私はそれを適切に説明することさえできません。

ここに画像の説明を入力

だから、私はこれを尋ねる最初の人ではないと思います. しかし、私はこれに対する解決策を本当に見つけることができませんでした。これを行うための新しい CSS3 の方法があるかもしれません - 私はフレックスボックスを考えています。何か案が？多分それは私が思っているよりも簡単ですか？

4

16 に答える 16

75

少し遅れましたが、同じ問題が発生したばかりで、別のスタックオーバーフローの投稿 ( https://stackoverflow.com/a/29103071 ) の助けを借りて最終的に解決しました。

img {
   object-fit: cover;
   width: 50px;
   height: 100px;
}

これがまだ誰かに役立つことを願っています。

Ps: max-height、max-width、min-width、およびmin-height css プロパティとも連携します。100%や100vh / 100vwなどの長さの単位を使用してコンテナーまたはブラウザー ウィンドウ全体を埋めるのに特に便利です。

于 2016-08-25T16:08:01.947 に答える
13

これはそれを行う必要があります：

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
于 2016-08-05T08:54:02.280 に答える
1

これを試して：

img {
  position: relative;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translateX(-50%);
}

お役に立てれば

于 2016-08-07T02:28:54.457 に答える