Question

我希望此图片的响应网站只能达到500px的高度。问题是我在我正在制作的网站上需要这样的几个部分，但不能使它与每个视口一起修复。

＆＃13;

*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.html,body {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
  font-size: 62.5%;
}


.bigImages {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (min-width:1400px) {
    .bigImages {
        width: 100%;
        height: 500px;
    }
}





.highlightText3 {
    font-family: $fontLatoHeavy;
    font-size: 8rem;
    line-height: 1.4;
    text-align: center;
    color: #000;
    z-index: 10;
    padding: 100px 0 100px 0;
    background: rgb(66,
133,
244);;
}

＆＃13;

<link href='https://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<h2 class="highlightText3">SERVICES</h2>
<img class="bigImages" src="https://images.unsplash.com/photo-1465152251391-e94453ee3f5a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=2f3699fc4dbc682fbecdc4fa4d5f6cad">

＆＃13;

Answer 1

如果可以，请将图像包装在容器中。这样，您可以约束图像占用的区域并根据需要对其进行掩码：

.image-wrapper {
  display: block;
  height: 500px;
  overflow: hidden;
  position: relative;
}

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

@media screen and (max-aspect-ratio: 4/3) {
  .bigImages {
      height: 100%;
      width: auto;
  }
}

我将图像包装器设置为具有固定的500px高度。然后我将图像放置在绝对位置，这样我就能将它推到中心位置。最后，我添加了一个宽高比媒体查询来翻转图像的约束方式，并允许它在所有视口大小上很好地缩放（尽管h2仍然需要对较小的视口有所了解）：

{{1}}

在这里演示：https://jsfiddle.net/0o2ykLh7/

修复响应式图像

1 个答案: