Question

我有一个<img>标签，该标签显示在文本块的背景中（出于某些原因，我不能使用CSS属性background-image）。< / p>

图像应始终填充高度，必要时可以剪裁侧面（最好剪裁左侧）。以下代码可在Chrome中正常运行并实现所需的行为，但由于Internet Explorer中不支持object-fit，因此图像被拉伸了。如何获得与对象适配相同的效果，但可以在Internet Explorer中使用？

.header-with-wide-bg-image--tile {
  background: white;
    padding: 1.5rem;
}

.p-y-15 {
  padding: 1.5rem
}

.header-with-wide-bg-image {
  position: relative;
  overflow: hidden;
}

.col-md-6 {
    box-sizing: border-box;
    -moz-flex-grow: 0;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    flex-basis: 50%;
    max-width: 50%;
}

.row {
    box-sizing: border-box;
    display: -moz-flex;
    display: flex;
    -moz-flex: 0 1 auto;
    flex: 0 1 auto;
    -moz-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}
.wrapper-fluid {
    margin-left: auto;
    margin-right: auto;
}

.wrapper {
box-sizing: border-box;
    max-width: 1198px;
    margin: 0 auto;
     }

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.header-with-wide-bg-image--background {
  position: absolute;
  width: 100%;
  z-index: -1;
  margin-left: auto;
  margin-right: auto;
  right: 0;
  left: 0;
  max-width: 1200px;
  top: auto;
  bottom: 0;
  height: 100%;
}

img {
  width: 100%;
  bottom: 0;
  object-fit: cover;
  height: 100%;
  top: auto;
}

<div class="content-wrapper">
<section class="wrapper-fluid header-with-wide-bg-image">
          <div class="header-with-wide-bg-image--background">
            <picture>
              <img src="https://image.freepik.com/free-photo/wide-asphalt-road-with-buildings-horizon_1127-2192.jpg" alt="" />
            </picture>
          </div>
          <div class="container-fluid wrapper p-y-15">
            <div class="row">
              <div class="col-md-6">
                <div class="header-with-wide-bg-image--tile">
                  <h1 class="">Headline</h1>
                  Content <br>
                  Content <br>
                  Content <br>
                  Content <br>
                  Content <br>
              </div>
            </div>
          </div>
        </section>
        </div>

Answer 1

Object-fit: cover在Internet Explorer中不起作用，它占用100％的宽度和100％的高度并导致宽高比失真。

尝试以下方法。用absolute将图像放置在元素内，并将其放置在中间：

img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
}

根据对象适合度，防止图像在Internet Explorer中拉伸：封面

1 个答案: