保持图像的纵横比，但在达到最大/最小高度时进行裁剪

Question

我正在尝试使该图像具有响应能力，它将调整大小并在所有尺寸下保持纵横比。然而超过 650px，它的高度不会增加，只会裁剪顶部和底部以保持比例而不拉伸。另外我希望图像高度不会低于 200px，并且只有左右两侧。我也希望图像始终位于中心。这是我到目前为止所拥有的：https://jsfiddle.net/4q83mh41/

<div class="hero">
<img src="http://wpdevserver.x10host.com/wp-content/themes/wp/img/hero1.jpg">
</div>


.hero {
    width: 100%;
    min-height:200px;
    max-height: 650px;
    position: relative;
}
.hero img {
    width: 100%;
    height:auto;
    min-height:200px;
    overflow: hidden;
    max-height: 650px;
    position:aboslute;
}

非常感谢

Answer 1

通过添加一些javascript，可以在

.hero

div 内动态调整图像的位置。 此外，CSS 媒体查询可用于保持图像宽度正确。

.hero {
  width: 100%;
  overflow: hidden;
  max-height: 650px;
}

.hero img {
  position: relative;
  height: 200px;
  width: auto;
}

@media (min-width:420px) {
  .hero img {
    width: 100%;
    height: auto;
  }
}

JavaScript 只是侦听调整大小事件并调整相对定位图像的

top

和

right

属性以使其保持居中。请注意，我使用 JQuery 来操作属性。

var heroresize = function() {
  var aspect = 1800./858,
      maxheight = 650,
      minheight = 200,
      width = $(".hero").width();
  if(width < minheight*aspect) {
    $(".hero img").css("right",(minheight*aspect - width)/2 + "px");
  } else {
    $(".hero img").css("right","0px");
  }

  if(width > maxheight*aspect) {
    $(".hero img").css("top",(maxheight - width/aspect)/2 + "px");
  } else {
    $(".hero img").css("top","0px");
  }
}
$(function(){
  heroresize();
  // remove if you don't need dynamic resizing
  $(".hero").on("resize",heroresize);
});

Javascript 可能会导致一些滞后/卡顿，因为调整大小事件可能会消耗性能。 如果您不需要担心动态调整大小，则可以删除指示的行。

我创建了一个你可以在这里玩的codepen：http://codepen.io/regdoug/pen/azxVwd请注意，codepen的最大高度为350px，因为这样你就可以看到效果而无需调整太多大小。

Answer 2

我想出了一个仅使用 css 的解决方案，结合使用您想要使用的宽高比、您想要使用的最大高度以及容器元素上 100% 的最小宽度。

body {
  margin: 0;
  padding: 0;
}

.container {
  aspect-ratio: 16/9;
  min-width: 100%;
  max-height: 350px;
}

.bg {
  width: 100%;
  height: 100%;
  background-color: lightpink;
}

<div class="container">
  <div class="bg"></div>
</div>