1

こんにちは、stackoverflow の CSS 第一人者です。私は問題で立ち往生しています.おそらくCSSでは不可能だと思います.

これら 2 つのルールを組み合わせて、両方を同じ画像に適用したいと考えています。

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

2 番目のコード ブロックで幅を設定することで、画像のサイズを変更したくないと想定しています。

これにより、ページの幅に関係なく画像が中央に配置され、ブラウザの幅が収まらない場合は側面がトリミングされます...

#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 に答える