Question

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

这是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的解决方案（根据您需要的浏览器支持）< / p>

以下是使用object-fit

的解决方案

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

Fiddle demo

Stack snippet

.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。这将使图像包装尺寸合适，然后调整背景图像而不拉伸。

Fiddle demo

Stack snippet

.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>

调整高度时，如何保持CTA图像的拉伸宽度为100％？

1 个答案: