0

私は午後中ずっと試しましたが、何かが足りません。誰かがこれを手伝ってくれますか？このページは次のリンクにあります

修正が必要な画像のあるページ。

画像を含むコードは次のとおりです。

    <headerimage><span>
            <img width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header"></span>
        </headerimage>

小さい画面で幅1920pxの画像を水平方向に中央に配置したいと思います。クラスにプロパティbackground-position：top centerを指定すると、完全に機能しますが、ページ自体に-tagが必要な場合は、それを実現できないようです。

私がそれを見るのを手伝ってください:)それはおそらく非常に愚かです、ハハ。本当にありがとう！

4

3 に答える 3

2

margin: 0 auto;次のように画像に設定します。

<headerimage>
  <span>
    <img style="margin:0 auto;" width="1920" height="600" src="http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg" class="attachment-post-thumbnail wp-post-image" alt="Suits Header" title="Suits Header">
  </span>
</headerimage>
于 2012-11-13T17:16:38.337 に答える
1

これを画像としてではなく、ヘッダーの背景として配置します。

background-image:url('http://www.websu.it/wp-content/uploads/2012/11/suitsheader.jpg');
background-position-x:center;
background-repeat:no-repeat;

大まかなデモについては、http：//jsfiddle.net/dwat001/Q58YZ/を参照してください。

于 2012-11-13T17:37:40.637 に答える
1

background-imageを使用できない場合の別のアプローチは、javascriptを使用して画像を配置することです。

<style>
  #imageHolder {
    overflow: hidden; // if image is bigger then holder, clip the image, no scollbars.
  }

  #wideHeaderImage {
    position: relative; // treat "left" as relative to the images normal position.
  }
</style>
<headerimage id="imageHolder">
  <img id="wideHeaderImage" width="1920".../>
</headerimage>

<script src="jquery"></script>
<script>
  // create function to center image;
  var centerImage = function($) {
     var windowWidth = $(window).width(); // get the current width of the window
     var imageSize = $('#wideHeaderImage').width(); // get width of image                                             
     $('#imageHolder').width(windowWidth); // set the containing element to be size of window.
     if(imageSize > windowWidth) { // if image is wider then window
       var offset = (imageSize - windowWidth) / 2; // Establish an offset
       $('#wideHeaderImage').css('left', '-' + offset + 'px'); // apply offset
     }
  };

  jquery(function($) {
    // this code runs within on load

    // register a resize event handler
    $(window).resize(function(event){centerImage($);});
    // resize once on onload.
    centerImage($);
  });
</script>

私はこれを実行していないので、おそらくあなたが私がしていることの要点を理解するのに十分なほどうまくいけば、いくつかの間違いを犯しました。

于 2012-11-14T17:40:55.673 に答える