web-dev-qa-db-ja.com

Bootstrap Internet Explorerでカード画像が歪む

私はレイアウトでbootstrap v4カードを使用していますが、残念ながら、Internet Explorer 11では画像がゆがんでいます。IEはheight: auto属性はimg-fluidクラスによって与えられます。カードの画像にカスタムの高さを適用する必要はありますか？ただし、カードはChromeおよびFirefoxで完全にレンダリングされます。エンジンをIE 10（F12コンソールで）に変更すると、問題はなくなりました。

カードでラップされていないクラスimg-fluidの画像は元の比率に従って表示されるため、問題はカードのレイアウトに対応していると思います。

   <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/1.jpg" alt="Step 1" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 1</h3>
              <p class="card-text">Text 1</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/2.jpg" alt="Step 2" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 2</h3>
              <p class="card-text">Text 2</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card">
            <img class="card-img-top img-fluid" src="img/3.jpg" alt="Step 3" width="600" height="400" />
            <div class="card-block">
              <h3 class="card-title">Step 3</h3>
              <p class="card-text">Text 3</p>
            </div>
          </div>
        </div>
      </div>
    </div>
csstwitter-bootstrapinternet-explorer-11bootstrap-4twitter-bootstrap-4
11
ddzone

ブートストラップ4はまだアルファ版であるため、さまざまな問題が予想されます。

IE 11の画像の高さに関する問題は既に特定されており、ここで追跡できます。

https://github.com/twbs/bootstrap/issues/21885

5
Zim

同じ問題がありましたが、カードの内容を<a>タグをクリック可能にし、それ自体を修正しましたが、IE11ではカードの高さが間違っていました。height: 100%から<a> 鬼ごっこ ：

<div class="col-md-4">
    <div class="card h-100">
        <a href="/document" style="height:100%;">
            <img class="card-img-top img-fluid" src="foo.jpg">
            <div class="card-block">
                <h4>doc number 4</h4>
                <p class="card-text">yada yada</p>
            </div>
        </a>
    </div>
</div>

カードをクリックできないようにするには、<a> by <div>（テストしていません）。

14
Christophe Le Besnerais

高さの追加：100％;次のこともできます。

.card img{
  height:100%;
}

explorerの問題を修正するために別のクラスなどを追加したくない場合。

2
Maximus

これは既知の問題です。これを修正するには、width: 100%;を追加します

ドキュメントによると：

SVG画像とIE 10 Internet Explorer 10では、.img-fluidを含むSVG画像のサイズが不均衡になります。これを修正するには、幅：100％\ 9;必要に応じて修正します。画像形式なので、Bootstrapは自動的に適用しません。

次のリンクでドキュメントを確認できます。 https://getbootstrap.com/docs/4.3/content/images/

1
Manuel Abascal

使用する overflow: hidden外部コンテナ用

1
Mihon

インラインスタイリングは魔法を...

例：style="height: 100%; overflow: hidden;"

1
Ras C-kay sKatle

解決策は、d-block（display：block）を親divに追加することです：

<div class="card d-block">
    <img class="card-img-top" src="someimage.jpg">
</div>
0
Jonathan Laliberte