html - 如何在调整高度时保持 100% 宽度的 CTA 图片不被拉伸(stretch)？

Question

我正在制作一个网站，我需要一张 CTA 图片。我正在使用 Bootstrap 4，我制作了一个自定义 CSS 来调整图像的外观。我把它放在屏幕的整个宽度上，所以 width: 100%;当我调整屏幕大小时，图像会响应并自行调整，使其变小并适合整个屏幕。但是当在常规的大屏幕上时，图像会占据整个网站，所以我希望能够将其保留为 100% 宽度，但高度较小。当我尝试调整最大高度时它最终只会拉伸(stretch)图像并且看起来不吸引人。我该怎么办？

这是 HTML 部分:

<!-- CTA Section -->
    <div class="img-wrapper">
        <img class="img-responsive" src="I/CTA.png">
        <div class="img-overlay">
            Want to see what more we have to offer? 
            <br><br>
            <a href="coffee.html"><button class="btn btn-md btn-primary">
             Click here</button></a>
        </div>
    </div>
<!-- /.img-wrapper -->

这是代码的 CSS 部分:

.img-wrapper {
position: relative;
 }

 .img-wrapper img {
    width: 100%;
    max-height: 650px;
 }

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
  color: white;
  font-size: 14px;
}

.img-overlay:before {
  content: ' ';
  display: block;
  height: 60%;
}

button {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 2px;
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

Answer 1

您可以使用 object-fit ，虽然不是很好browser support然而，因此可能需要使用 background-image 的解决方案(基于您需要的浏览器支持)

这是一个使用 object-fit 的解决方案

 .img-wrapper img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
 }

Fiddle demo

堆栈片段

.img-wrapper {
position: relative;
 }

 .img-wrapper img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
 }

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
  color: white;
  font-size: 14px;
}

.img-overlay:before {
  content: ' ';
  display: block;
  height: 60%;
}

button {
    font-family: 'Raleway', sans-serif;
    letter-spacing: 2px;
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) { 
    /* matches 'btn-xs' */
    .btn-responsive {
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
    }
}

<!-- CTA Section -->
    <div class="img-wrapper">
        <img class="img-responsive" src="http://lorempixel.com/500/350/nature/1/">
        <div class="img-overlay">
            Want to see what more we have to offer? 
            <br><br>
            <a href="coffee.html"><button class="btn btn-md btn-primary">
             Click here</button></a>
        </div>
    </div>

---

这是另一个使用 background-image 的例子。

实现此功能的技巧是将图像保持在原位，但设置了 visiblity: hidden。这将使图像包装大小合适，然后背景图像调整而不拉伸(stretch)。

Fiddle demo

堆栈片段

.img-wrapper {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.img-wrapper img {
  width: 100%;
  max-height: 350px;
  visibility: hidden;
}

.img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
  color: white;
  font-size: 14px;
}

.img-overlay:before {
  content: ' ';
  display: block;
  height: 60%;
}

button {
  font-family: 'Raleway', sans-serif;
  letter-spacing: 2px;
}

.btn-responsive {
  /* matches 'btn-md' */
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.3333333;
  border-radius: 6px;
}

@media (max-width:760px) {
  /* matches 'btn-xs' */
  .btn-responsive {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
  }
}

<!-- CTA Section -->
<div class="img-wrapper" style="background-image: url(http://lorempixel.com/500/350/nature/1/)">
  <img class="img-responsive" src="http://lorempixel.com/500/350/nature/1/">
  <div class="img-overlay">
    Want to see what more we have to offer?
    <br>
    <br>
    <a href="coffee.html">
      <button class="btn btn-md btn-primary">
        Click here</button>
    </a>
  </div>
</div>