画像に影響を与えないようにする

Question

私はの画像をarticleの要素の中に入れた画像に使用しようとしていましたが、まったく影響していないようです。

object-fitプロパティの希望値はcoverになりますが、現在のところ他の値のいずれも機能していないようです。

私が価値を変えたとき、彼らは縮小せず、成長もせず、何もしません。

CodePenが表示されている場合は、2つの行の間に空白があり、画像にはすべて同じスペース/高さが使用されません（object-fit: coverと予想されます）。

Here's a CodePen

body{ 
 
\t margin: 0 auto; padding: 0; 
 
} 
 
main{ 
 
\t min-height: 70vh; 
 
\t padding: 0; 
 
} 
 
main > section.posts{ 
 
\t box-sizing: border-box; 
 
\t margin: 0; padding: 0; 
 
\t display: flex; 
 
\t flex-flow: row wrap; 
 
} 
 
main > section.posts > article{ 
 
    outline: 1px solid red; 
 
\t width: 22vw; 
 
\t min-height: 100vh; 
 
\t margin: 0; padding: 0; 
 
\t flex-grow: 1; 
 
\t overflow: hidden; 
 
\t box-sizing: border-box; 
 
} 
 
main > section.posts > article > img{ /* Our suspect */ 
 
    object-fit: cover; 
 
}

<!-- 
 
Basic structure of this file is 
 

 
<main> 
 
    <section.posts> 
 
     <article> (six of them) 
 
      <image> 
 
--> 
 

 
<main> 
 
    <section class="posts"> 
 
    <article> 
 
     <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg"> 
 
    </article> 
 

 
    <article> 
 
     <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg"> 
 
    </article> 
 

 
    <article> 
 
     <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png"> 
 
    </article> 
 

 
    <article> 
 
     <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg"> 
 
    </article> 
 

 
    <article> 
 
     <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg"> 
 
    </article> 
 

 
    <article> 
 
     <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg"> 
 
    </article> 
 
    </section> 
 
</main>

Answer 1

（接頭辞を考えます）。つまり、イメージがページに読み込まれると、実際のイメージが置き換えられます。イメージタグ内のその内容は、オブジェクトfitプロパティに基づいて適用されます。これはコンテナです。

記事オブジェクトをimgタグに置き換えると、フレックスボックスで画像が伸びて適切に塗りつぶされるはずです。

http://jsfiddle.net/o2fx87ws/

body{ 
 
    \t margin: 0 auto; padding: 0; 
 
    } 
 
    main{ 
 
    \t min-height: 70vh; 
 
    \t padding: 0; 
 
    } 
 
    main > section.posts{ 
 
    \t box-sizing: border-box; 
 
    \t margin: 0; padding: 0; 
 
    \t display: flex; 
 
    \t flex-flow: row wrap; 
 
    } 
 
    main > section.posts > img{ 
 
     outline: 1px solid red; 
 
    \t width: 22vw; 
 
    \t min-height: 100vh; 
 
    \t margin: 0; padding: 0; 
 
    \t flex-grow: 1; 
 
    \t overflow: hidden; 
 
    \t box-sizing: border-box; 
 
    } 
 
    main > section.posts > img{ /* Our suspect */ 
 
     object-fit: cover; 
 
    }

<main> 
 
     <section class="posts"> 
 
    
 
      <img src="http://41.media.tumblr.com/tumblr_m6s6d65lE11qdnz8wo1_400.jpg"> 
 

 
      <img src="http://41.media.tumblr.com/71c1fe7c899cd048fb961d3c1953411b/tumblr_nj24pvINyW1qzq8p3o1_400.jpg"> 
 
     
 

 
     
 
      <img src="http://36.media.tumblr.com/3358cb6ac8eaa0e61dffd53bc1bab93d/tumblr_n92l475hol1qlmppmo1_400.png"> 
 
     
 

 
     
 
      <img src="http://36.media.tumblr.com/9ad997ca0385a23a8d82ec919da2392c/tumblr_nwcewbFVAL1s71gzco1_400.jpg"> 
 
     
 

 
     
 
      <img src="http://41.media.tumblr.com/tumblr_mbl45xDSwj1qfn79co1_400.jpg"> 
 
     
 

 
     
 
      <img src="http://41.media.tumblr.com/1c3718e71a2aa5acaaaf4af654991c91/tumblr_nx6psaH67d1tvh80lo1_400.jpg"> 
 
     
 
     </section> 
 
    </main>

Answer 2

ここスペックで述べているものです。

5.5. Sizing Objects: the object-fit property

object-fitプロパティはREPLACのどの内容を指定しますed エレメントは、使用済みの高さと の幅で確立されたボックスに適合させる必要があります。

私は、その使用された高さと幅によって確立されたボックスに合わせて... に焦点を当てました。

imgの要素には、heightとという属性が追加されています。

Revised Codepen

、各画像の下に空白の小さな行を削除imgにvertical-align: bottomを追加します。説明についてはこちらをご覧ください：Mystery white space underneath image tag側の注意点として

は、あなたがのためにブラウザのサポートを検討する必要があります。

1. object-fit（なしIEのサポートを、限らサファリサポート）
2. main（なしIEのサポート）
3. flexboxオブジェクトフィットを交換コンテンツに適用され

Answer 3

IはIMGを交換するためbox-sizing: content-boxに容器、画像及びコンテナの親を変更し、容器の代わりにIMGにobject-fit: coverを切り替えます。 imgは切り取られることが予想されるので、100vhの高さと100％と+ 22hwの幅のオフセットが上位4つでうまくいきました。下の2つのimgの両方の歪みはあまりありません。 object-positionはまだ私のために動作しません（ないことはありません）： - こんにちは

http://codepen.io/01/pen/zrvdaz?editors=110

body{ 
    margin: 0 auto; padding: 0; 
} 
main{ 
    min-height: 70vh; 
    padding: 0; 
} 
main > section.posts{ 
    box-sizing: content-box; 
    margin: 0; padding: 0; 
    display: flex; 
    flex-flow: row wrap; 
} 
main > section.posts > article{ 
    outline: 1px solid red; 
    width: 22vw; 
    min-height: 100vh; 
    margin: 0; padding: 0; 
    flex-grow: 1; 
    overflow: hidden; 
    box-sizing:content-box; 
    object-fit: cover; 

} 
main > section.posts > article > img{ 
display: block; 
    box-sizing:content-box; 
    max-height: 100vh; 
    width: calc(100% + 22vh); 
    object-position: 100% 100%; 
}