小编ddz*_*one的帖子

我在我的布局中使用了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"> …