☰

オブジェクトフィットが画像に影響しない 質問する

tag-icon • tag-icon html css
オブジェクトフィットが画像に影響しない 質問する

object-fit要素内に配置されたいくつかの画像に使用してみましたarticleが、まったく影響がないようです。

プロパティの望ましい値object-fitは ですcoverが、現時点では他の値も機能しないようです。

値を変更しても、縮小も拡大も何も起こりません。

CodePen を見ると、2 つの行の間に空白があり、画像はすべて同じスペース/高さを占めていません ( の場合に予想されるとおりobject-fit: cover)。

CodePenはこちら

body{
	margin: 0 auto; padding: 0;
}
main{
	min-height: 70vh;
	padding: 0;
}
main > section.posts{
	box-sizing: border-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: 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>

ベストアンサー1

を機能させるにはobject-fit、画像自体に およびwidthが必要ですheight。OP の CSS では、画像に幅や高さが設定されていないため、object-fit は機能しません。

ヒント:画像自体の寸法である必要はありませんwidth。heightをコンテナに充填したいdiv場合、次のように設定します。div

width:100%; height:100%;

...そしてブラウザは、この div がコンテナーのスペースを完全に埋める必要があることを認識します。

の場合img、ブラウザは次の 2 つの手順を実行します。

  1. ブラウザ境界ボックスを作成する: デフォルトでは、ボックスのサイズは画像自体のサイズとまったく同じになります。ただし、ブラウザに画像のサイズをコンテナの幅の 100% と高さの 100% に設定するよう指示することもできます。その場合、コンテナのスペースを完全に埋めるボックスが作成されます。
  2. ブラウザ画像のピクセルをこのボックスに収める: デフォルトでは、画像は圧縮/伸張されるため、画像の幅はボックスの幅と一致します、 そしてその画像の高さはボックスの高さと一致する. しかし、 を使用するとobject-fit、画像とボックスの寸法を合わせる方法たとえば、object-fit:coverアスペクト比を維持しながらボックスを完全に埋めるように画像を拡大/縮小するコマンドを使用します。

OPに関しては、私は単純に次のように設定します:

main > section.posts > article > img {
  width: 100%; /* image box size as % of container, see step 1 */
  height: 100%; /* image box size as % of container, see step 1 */
  object-fit: cover; /* matching of image pixels to image box, see step 2 */
}

最後に注意点があります。サイズ設定に % 値を使用する場合、object-fit が機能するには、コンテナーの幅と高さが定義されている必要があります。OP はheightで定義する必要がありますmain > section.posts > article。

おすすめ記事