web-dev-qa-db-ja.com

divを比例させながらdivを画像で塗りつぶすにはどうすればよいですか？

私はこのスレッドを見つけました— 画像のアスペクト比を維持しながら<div>を満たすように画像を引き伸ばすにはどうすればよいですか？ —それは私が望むものではありません。

特定のサイズのdivとその中に画像があります。 always画像が横長か縦長かにかかわらず、divに画像を入力します。また、画像が切り取られているかどうかは関係ありません（div自体にはオーバーフローが隠されています）。

したがって、画像がポートレートの場合、widthを100%に、height:autoを比例させておく必要があります。画像が横長の場合、heightを100%に、width to beauto`にしたいです。複雑そうですね？

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

私はそれを行う方法がわからないので、私が意味することの簡単なイメージを単に作成しました。適切に説明することすらできません。

enter image description here

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

cssimagecss3positioningflexbox
83
matt

必要なものが正しく理解できたら、画像の幅と高さの属性をそのままにしてアスペクト比を維持し、flexboxを使用してセンタリングを行うことができます。

.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}
<div class="fill">
    <img src="https://lorempizza.com/320/240" alt="" />
</div>

JSFiddle here

IE9、Chrome 31、およびOpera 18でこれをテストしましたが、他のブラウザーはテストされていません。いつものように、特定のサポート要件を考慮する必要があります。

117
Isius

それは少し遅れていますが、私は同じ問題を抱えていて、別のstackoverflowの投稿の助けを借りて最終的に解決しました（ https://stackoverflow.com/a/29103071 ）。

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

これがまだ誰かを助けることを願っています。

PS：max-height、max-width、min-widthおよびmin-heightcssプロパティ。 100％や100vh/100vwのような長さの単位を使用して、コンテナまたはブラウザウィンドウ全体を埋めるのに特に便利です。

33
Hermilton

古い質問ですが、方法があるので更新に値します。

CSSベースの正しい答えは、object-fit: coverを使用することです。これはbackground-size: coverと同様に機能します。配置はobject-position属性によって処理され、デフォルトでは中央揃えになります。

ただし、IE/Edgeブラウザー、またはAndroid <4.4.4ではサポートされていません。また、object-positionはSafari、iOS、またはOSXではサポートされていません。ポリフィルは存在しますが、 object-fit-images が最良のサポートを提供するようです。

プロパティの仕組みの詳細については、 CSS Tricksのobject-fitに関する記事 の説明とデモを参照してください。

7
holist

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

img {    
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
6
maksim1

これは、css flexプロパティを使用して実現できます。以下のコードをご覧ください

.img-container {
  width: 150px;
  height: 150px;
  border: 2px solid red;
  justify-content: center;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  
}
.img-container .img-to-fit {
  flex: 1;
  height: 100%;
}
<div class="img-container">
  <img class="img-to-fit" src="https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg" />
</div>
3
Sandeep K Nair

以下のすべての回答では、幅と高さが固定されているため、ソリューションが「応答しなくなります」。

結果を得るが、画像の応答性を保つために、私は次を使用しました：

  1. コンテナ内に、希望する比率の透明なgif画像を配置します
  2. サイズを変更してトリミングする画像を含む画像タグをインラインcss背景に指定します

HTML：

<div class="container">
    <img style="background-image: url("https://i.imgur.com/XOmNCwY.jpg");" src="img/blank.gif">
</div> 


.container img{
   width: 100%;
   height: auto;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}​
3
Artur Klassen

Divを使用してこれを実現できます。 imgタグなし:)これが役立つことを願っています。

.img{
        width:100px;
        height:100px;
        background-image:url('http://www.mandalas.com/mandala/htdocs/images/Lrg_image_Pages/Flowers/Large_Orange_Lotus_8.jpg');
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid red;
        background-size:cover;
}
.img1{
        width:100px;
        height:100px;
        background-image:url('https://images.freeimages.com/images/large-previews/9a4/large-pumpkin-1387927.jpg');
        background-repeat:no-repeat;
        background-position:center center;
        border:1px solid red;
        background-size:cover;
}
<div class="img">     
</div>
<div class="img1">        
</div>
2
Sivasakthivel Kalaiarasu

background-size: cover （IE9 +）をbackground-imageと組み合わせて使用​​することを検討してください。 IE8-の場合、 polyfill があります。

2
Marat Tanalin

これを試して：

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

お役に立てれば

2
Landerqvist

ここに私の実例があります。 background-size：coverとbackground-position：center centerでdivコンテナの背景として画像を設定するトリックを使用しました

Width：100％およびopacity：0のイメージを配置して、非表示にしました。子クリックイベントの呼び出しに特別な関心があるため、画像のみを表示していることに注意してください。

私がangularを使用していることは、完全に無関係であることに注意してください。

<div class="foto-item" ng-style="{'background-image':'url('+foto.path+')'}">
    <img class="materialboxed" ng-class="foto.picid" ng-src="{{foto.path}}" style="opacity: 0;filter: alpha(opacity=0);" width="100%" onclick="$('.materialboxed')/>
 </div>
<style>
.foto-item {
height: 75% !important;
width: 100%;
position: absolute;
top: 0;
left: 0;
overflow:hidden;
background-size: cover;
background-position: center center;
}
</style>

結果は、すべての場合に最適と定義したものです

1
Noel Carcases

説明した「ベストケース」シナリオを達成した唯一の方法は、画像を背景として置くことでした。

<div class="container"></div>​

.container {
    width: 150px;
    height: 100px;
    background-image: url("http://i.stack.imgur.com/2OrtT.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
}​
1
David Nathan

CSSのobject-fit: coverおよびobject-position: left centerプロパティ値は、この問題に対処するようになりました。

0
James
.image-wrapper{
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
}
.image-wrapper img {
    object-fit: contain;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
<div class="image-wrapper">
  <img src="">
</div>
0
Yaseen