1

你好 CSS 大师的 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来做到这一点？或者那不可能？

4

3 回答 3

1

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

这是一个很好的起点。

于 2012-10-19T22:30:14.757 回答
0

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

HTML

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

CSS

.img {
    max-width: 2560px;
    width: 100%;
    height: 100%;
    background-image: url('whatever.jpg');
    background-size: contain;
}
于 2012-10-19T22:31:42.020 回答
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>​

http://jsfiddle.net/Xt2vM/

于 2012-10-19T22:32:37.463 回答