55184


bootstrap4でサムネイルリストを作りましたが、そのCSSで`object-
fit`に`cover`としたにも関わらず、画像の高さが`cover`になりません。どうすれば改善するのでしょうか?

**HTML**

[code]

    <div class="container">
    
      <div class="row">
        <div class="col-6">
          <div class="row">
            <a href="#" class="theme-color-text w-100">
              <img src="https://placeimg.com/600/500/animals" class="image">
            </a>
          </div>
        </div>
        <div class="col-6">
          <div class="row">
            <a href="#" class="theme-color-text w-100">
              <img src="https://placeimg.com/150/50/animals" class="image">
            </a>
          </div>
        </div>
    
    </div>
    
[/code]

**CSS**

[code]

    .text {
      position: relative;
    }
    
    .text::before {
      margin-top: 10px;
      display: block;
      content: "";
      padding-top: 100%;
    }
    
    .image {
      width: 100%;
      margin-top: 10px;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
    
[/code]


CC BY-SA 4.0
2019-05-22T14:07:38.503
55179
2020-01-25T02:39:52.547
2020-01-25T02:39:52.547
32986
34420
question
html css twitter-bootstrap
coverなのに画像の高さが無効化される


object-fitは高さを揃えるスタイルではなくて、ボックスその縦横に合わせてコンテンツをどう表示するかというプロパティです。  
高さを揃えるプロパティではないのでそのコンテンツ自体もしくは囲うボックスに対して縦横を指定してやる必要があります。

object-fit  
<https://developer.mozilla.org/ja/docs/Web/CSS/object-fit>

> cover  
>
> 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。

例えばimageに対して高さを指定すればその高さに合わせて拡大縮小されます。

[code]

    .image {
        width: 100%;
        height: 250px;
        margin-top: 10px;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    
[/code]


CC BY-SA 4.0
2019-05-23T04:49:18.347
55184
2019-05-23T04:49:18.347
22665
55179
answer