首先按宽度缩小图像，然后按比例缩小最大宽度

Question

我的图片 1200 x 200px 。在此图像的中心，我有一个 500 x 200px 的空间，这是完整图像的主要内容。在此图片的每一面，我都有一个额外的内容。 注意：它位于单张图片上。

如果窗口宽度减小，那么首先它应该消耗图像的附加内容，但是切割它，保持图像高度不变。但是，如果我将窗口宽度缩小到主要内容宽度以下（此时，所有其他内容都被剪掉了），那么现在应该按比例调整图像大小，从而影响高度。

我的疑惑：

1. 只能用CSS吗？
2. 如果没有，有一些JS库可以做到这一点吗？
3. 如果没有，我应该如何构建HTML，CSS和JS来实现它呢？

这是一个全宽的示例横幅：请注意，它有一个主要内容和两个附加内容。



下面这张图片应该有助于理解：我尝试模拟窗口宽度调整大小，在1200像素，1000像素和500像素（不影响高度），然后是350像素（影响和按比例调整图像大小。）

Answer 1

  

是否可以只使用CSS？

是的，您只需要1 <div>。将图像视为背景图像，使用background-position定位死点。然后使用媒体查询调整<div>的大小，将宽度设置为指定的断点。

Answer 2

您可以使用这样的简单媒体查询：

jQuery(".slide").find("h3").each(function() {
  var str = jQuery(this).text();
  str = str.replace(/\s+/g, '-').toLowerCase();
  jQuery(this).parent().find("p a").attr('aria-labelledby', str);
});

Answer 3

使用媒体查询添加图像/元素和更改css。 至于你的问题，请使用百分比来重新调整图像大小。 我建议查找渐进增强和响应式设计。 如果您不使用它，也请查看视口。 不要使用VW，IE，EDGE（不支持VMAX）和Opera mini，ie8（根本不支持）还没有足够的支持。

Answer 4

#banner {
  background-image: url("http://i.stack.imgur.com/csRha.png");
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  border: 1px solid red;
}

@media all and (min-width: 1200px) {
  #banner {
    width: 1200px;
  }
}

@media all and (max-width: 1200px) {
  #banner {
    background-position: 50% 0;
  }
}

@media all and (max-width: 500px) {
  #banner {
    background-size: 240%;
  }
}

<div id="banner"></div>