Javascript 水平居中的图像大于屏幕&；缩小浏览器上的图像大小

你好，stackoverflow的CSS大师。我被困在一个问题上，我想这可能是CSS不可能的

我想将这两个规则结合起来，并将它们应用于同一个图像：

1） 在浏览器大小更改时动态缩放图像

#main-graphic {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

2） 当浏览器变小时，将图像居中并裁剪图像的侧面

#main-graphic {
  width: 2560px;
  height: 100%;
  margin-left: -1280px;
  left: 50%;
  position: relative;
}

---

但是我如何用CSS来实现这一点呢？或者这是不可能的？

您需要充分利用最大/最小宽度（和高度）

---

您需要充分利用最大/最小宽度（和高度）

---

例如，您可以将该图像用作空div上的背景图像。我不完全确定你想要什么，但是像这样的东西可以满足你的需要

HTML

---

例如，您可以将该图像用作空div上的背景图像。我不完全确定你想要什么，但是像这样的东西可以满足你的需要

HTML

---

通过在第二个代码块中设置宽度，我假设您不想调整图像的大小

这将保持图像居中，无论页面宽度和裁剪边，如果浏览器宽度不适合它

#main-graphic {
  display: inline-block;
  background-image: url('http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
  width: 100%;
  height: 228px;
  background-repeat: no-repeat;
  background-size: 1280px 228px;
  background-position: 50% 0;
}​

<div id="main-graphic"></div>​

#主图形{
显示：内联块；
背景图像：url（'http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
宽度：100%；
高度：228px；
背景重复：无重复；
背景尺寸：1280px 228px；
背景位置：50%0；
}​
​

---

通过在第二个代码块中设置宽度，我假设您不想调整图像大小

这将保持图像居中，无论页面宽度和裁剪边，如果浏览器宽度不适合它

#main-graphic {
  display: inline-block;
  background-image: url('http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
  width: 100%;
  height: 228px;
  background-repeat: no-repeat;
  background-size: 1280px 228px;
  background-position: 50% 0;
}​

<div id="main-graphic"></div>​

#主图形{
显示：内联块；
背景图像：url（'http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
宽度：100%；
高度：228px；
背景重复：无重复；
背景尺寸：1280px 228px；
背景位置：50%0；
}​
​

---

是的，但这仍然会使它在每个媒体查询步骤中都显得紧张不安。除非我使用了1000个媒体查询。你可以用它在两个CSS之间切换。或者我没有得到你想要的：）。你应该能够使用类似的东西：bfrohs：这并不能完成裁剪方面的工作，只能完成调整大小方面的工作。是的，但这仍然会使它在每个媒体查询步骤中都会出现跳跃。除非我使用了1000个媒体查询。你可以用它在两个CSS之间切换。或者我没有得到你想要的：）。你应该能够使用类似的东西：bfrohs：这不能完成裁剪方面，只能完成调整大小方面。我确实希望图像也能调整大小。这个JSFIDLE只完成#2，而不是#1。我确实希望图像也能调整大小。这个JSFIDLE只完成了#2，而不是#1。

#main-graphic {
  display: inline-block;
  background-image: url('http://cux.waspdigital.com/wp-content/themes/creativeux/_/img/home-main.jpg');
  width: 100%;
  height: 228px;
  background-repeat: no-repeat;
  background-size: 1280px 228px;
  background-position: 50% 0;
}​

<div id="main-graphic"></div>​