IE 11 中的拉伸图像[关闭]

Posted 2023-03-06

【中文标题】IE 11 中的拉伸图像[关闭]

【英文标题】：Stretched Images in IE 11 [closed]

【发布时间】：2020-01-01 13:55:42

【问题描述】：

我的 WordPress 网站在 Chrome 和 Firefox 上运行良好，但在 Internet Explorer 11 中，它在地图图像之后的第一张图像中提供了一些图像，例如 link 中的一些图像。

我尝试在我的 style.css 主题中添加这个 CSS 代码，但它不起作用

img
    max-width:100%;
    flex-shrink:0;

铬： IE：

你能帮我解决这个问题吗？

【问题讨论】：

我尝试在 IE 11 中测试您的网站，图像看起来适合我。这是我的测试结果。 i.postimg.cc/GmT0pTpX/256.png 如果您的情况不一样，请您尝试发布问题的快照可能有助于我们了解问题。感谢您的理解。

@Deepak-MSFT 你能检查我的编辑吗

尝试参考这些链接和示例可能有助于解决您的问题。 codepen.io/studiotwist/pen/XdgqmZ 和 ***.com/questions/41226895/… 和 medium.com/@primozcigler/…

【参考方案1】：

这是因为您使用了与 IE11 不兼容的 object-fit 属性。

Can I use

您必须使用该图像作为背景图像。

2 如果你想固定宽度，那么高度需要是自动的。

如果你想固定高度，那么宽度需要是自动的。这样，您的图像就可以在任何设计中进行拉伸。

我建议你使用作为背景图片检查 sn-p。

.img 
  display: inline-block;
  background: url(https://dummyimage.com/600x400/000/fff) center center;
  width: 300px;
  height: 400px;


.text 
  display: inline-block;
  vertical-align: top;
  padding-left: 20px;
  width: calc(100% - 330px);


p:last-of-type 
  margin-bottom: 0px;

<div id="here">
  <span class="img"></span>
  <div class="text">
    <h2>Example</h2>
    <p>Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example Example</p>
    <p>Example Example</p>
    <p>Length: 111 min</p>
    <p>Example Example Example</p>
    <p>Example Example Example Example Example Example Example Example Example Example Example</p>
  </div>
</div>

【讨论】：

那么删除它会解决问题吗？

它想解决问题。 1.您必须使用该图像作为背景图像。 2 如果你想固定宽度，那么高度需要是自动的。 3.如果你想固定高度，那么宽度需要是自动的。这样，您的图像就可以在任何设计中进行拉伸。我建议你用作背景图片。

这是评论，而不是对（离题）问题的回答。 ***.com/help/how-to-answer

我添加了一个示例作为 sn-p 这将帮助您获得所需的输出。