【问题标题】:How can I horizontally align the following header image?如何水平对齐以下标题图像?
【发布时间】:2012-11-15 01:40:55
【问题描述】:

我已经尝试了整个下午,但我错过了一些东西,有人可以帮我解决这个问题吗? 该页面可以在以下链接中找到

The page with the image that I need fixed

包含图片的代码是:

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

我想在较小的屏幕上将宽度为 1920 像素的图像水平居中。当我给一个类属性 background-position: top center 时,它工作得很好,但是当我需要在页面本身中有一个 -tag 时,我似乎无法实现它。

请帮我看看:)这可能很愚蠢,哈哈。 非常感谢!

【问题讨论】:

    标签: html css image alignment


    【解决方案1】:

    在图片上设置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>
    

    【讨论】:

    • 嗨,安迪,感谢您的回复。但是它不起作用,可能是因为我在 CSS 中做了一些奇怪的事情。您介意查看page 吗?也许你可以找出我做错了什么。再次感谢!
    • @RobinPapa 哦,您希望图像的中心始终位于屏幕上,并且图像的宽度始终为 1920 像素?仅使用 CSS 是不可能的
    • 不完全是:我使用大于屏幕宽度的图像,通常为 1920 像素,这样图像就可以在各种屏幕上以 100% 的屏幕宽度显示。例如,我只需要它一直水平居中,以便在我的 1440 像素屏幕上看到中心 1440 像素。使用 margin:0 auto 是行不通的:/。不过你是对的,这就是我试图建立的,只是不是 1920 像素,而是图像的全尺寸。
    • 只需将width: 100% 应用到图像上,它将始终与屏幕一样宽
    • 无视,谢谢!做到了!以为我已经试过了哈哈,非常感谢!
    【解决方案2】:

    我不会把它作为图片而是作为背景放在你的标题上。

    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/ 以获得粗略的演示。

    【讨论】:

    • 嗨,大卫,非常感谢!不幸的是,在我的原始设计中,我确实使用了这个修复程序,但我坚持使用 Wordpress 并从博客文章的“特色图像”部分检索图像。所以我需要使用 img 标签。你能帮我进一步吗?谢谢:)
    【解决方案3】:

    如果您不能使用背景图像,另一种方法是使用 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>
    

    我没有运行这个,所以我可能犯了一些错误,希望足以让你了解我在做什么。

    【讨论】:

    • 非常感谢,将不得不再次测试!非常感谢!
    猜你喜欢
    • 2014-02-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多