Question

Hello CSS guru的stackoverflow。我陷入了一个问题，我想也许用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做到这一点？或者那是不可能的？

Answer 1

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

Here is a good place to start.

Answer 2

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

HTML

 <div class="img"></div>

CSS

.img {
    max-width: 2560px;
    width: 100%;
    height: 100%;
    background-image: url('whatever.jpg');
    background-size: contain;
}

Answer 3

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

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

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

http://jsfiddle.net/Xt2vM/

水平居中图像大于屏幕＆amp;缩小浏览器大小的缩小图像

3 个答案: