divに比例して画像を埋め込むにはどうすればよいですか？

Question

このスレッドが見つかりました - How do you stretch an image to fill a <div> while keeping the image's aspect-ratio? - それは私が欲しいものではありません。

私はあるサイズの画像とその中の画像を持っています。私はにいつも画像が風景か肖像画であるかどうかにかかわらず画像とdivを記入したいと思う。画像がカットオフされているかどうかは関係ありません（div自体はオーバーフローが隠されています）。

画像が縦長の場合はを100%とし、height:autoを比例するようにします。画像が横長の場合は、heightを100%とし、width to beをautoとします。音は複雑ですよね？

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

私はそれを行う方法がわからないので、私は単に私が意味するものの簡単なイメージを作成しました。私はそれを正しく記述することさえできません。

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

Answer 1

いいえ、これにはCSS3のみの解決策はありません。あなたがリンクした質問のtop answerは、しかし、二番目に優れたものです。

Answer 2

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

Answer 3

あなたが望むものを正しく理解していれば、縦横比を維持するために画像の幅と高さの属性を残しておき、フレックスボックスを使ってセンタリングを行うことができます。

.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、クロム31、とOpera 18で正常にこれをテストした。しかし、他のブラウザではテストされませんでした。いつものように、特定のサポート要件を考慮する必要があります。

Answer 4

ここに私の実例があります。私は背景サイズのdivコンテナの背景として画像を設定しているトリックを使用しています：カバーと背景位置：center center

幅：100％と不透明度：0の画像を配置しました。 。子のクリックイベントを呼び出すことに特に関心があるので、私は自分のイメージしか表示していないことに注意してください。

注意してください私は完全に無関係です角度を使用しています。

<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つ

Answer 5

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

正しいCSSベースの回答は、background-size: coverのように動作するobject-fit: coverを使用することです。位置指定はobject-position属性によって処理され、デフォルトではセンタリングが行われます。

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

プロパティの詳細については、CSS Tricks article on object-fitの説明とデモを参照してください。

Answer 6

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

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

Answer 7

はこれを試してみてください：

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

希望、これはそれが少し遅れだが、私はちょうど同じ問題を抱えていたし、最終的にそれを解決し

Answer 8

を支援します別のstackoverflowポスト（https://stackoverflow.com/a/29103071）の助け。

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

これはまだ誰かに役立ちます。

Psが：またMAX-高、最大幅、最小幅と分間高 CSSプロパティと連携します。 100％または100vh/100vwのような長さの単位をコンテナまたはブラウザウィンドウ全体に塗りつぶすのに便利です。

Answer 9

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

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

<div class="img"> \t 
 
</div> 
 
<div class="img1"> \t 
 
</div>