Question

这是我想要的样本：http://www.garysheng.com/ 它不是我的

在移动设备中，背景图像仍然会缩放，图片会准确居中

Answer 1

您必须使用一些基本的CSS规则，例如background-size和background-position。

为了让您这样做，您的样式表可能看起来与此类似：

.item-class {
    background-image: url('url');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

或者简单地使用速记版本：

.item-class {
    background: url('url') no-repeat center center/cover;
}

您的.item-class对象的高度应为100vh，以使其行为与您喜欢的Gary Sheng网站的行为相同。

Answer 2

这是完整的样本。我试图尽可能地清理它，但要注意以下几点：

有对外部文件和jQuery的引用
自定义JS代码是从缩小版本中提取的，有点乱，请调试并调整它。
JSFiddle内联CSS对小屏幕非常重要。

https://jsfiddle.net/mzeyt6p8/2/

要查看结果，请使用以下链接：https://jsfiddle.net/mzeyt6p8/2/embedded/result/

<link rel="stylesheet" media="screen" href="https://static-assets.strikinglycdn.com/assets/B4E0UXLKGAJ/_reset-d71ac2794e9667b03908f392a514acc4.css">
<link rel="stylesheet" media="screen" href="https://static-assets.strikinglycdn.com/assets/B4E0UXLKGAJ/themes/fresh/main_v4-0a28326edfc0328a9a1f8feb08e3d1d2.css">

为了更清楚，这里有一个应该在本地工作的完整样本。

<强>的index.html

<html itemscope="" itemtype="http://schema.org/WebPage" lang="en" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:og="http://ogp.me/ns#" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>I'm Gary Sheng</title>
    <link rel="stylesheet" media="screen" href="https://static-assets.strikinglycdn.com/assets/B4E0UXLKGAJ/_reset-d71ac2794e9667b03908f392a514acc4.css">
    <link rel="stylesheet" media="screen" href="https://static-assets.strikinglycdn.com/assets/B4E0UXLKGAJ/themes/fresh/main_v4-0a28326edfc0328a9a1f8feb08e3d1d2.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <style>
        @media only screen and (max-width: 727px) {
            .s-bg-image { background-position: 80% !important; }
        }

        .s-bg-image {
            background-repeat: no-repeat;
            background-size: cover;
            background-color: transparent;
            background-position: 50% 50%;
            background-image: url('http://res.cloudinary.com/hrscywv4p/image/upload/c_limit,f_auto,fl_progressive,h_1500,q_90,w_2000/v1/9621/Untitled-1_msxftc.jpg');
            padding-top: 135px;
            padding-bottom: 136px;
        }

    </style>
    <script type="text/javascript" src="size.js"></script>
</head>

<body>
    <div id="s-content" class="s-variation-default s-custom-colors s-font-heading-open-sans s-font-title-raleway s-font-body-open-sans" lang="en">
        <div class="page-wrapper">
            <ul class="slides s-page-1" style="display: block; opacity: 1;">
                <li class="slide s-section-1" id="section-f_de4cf792-9bd2-4c70-85f6-5117032a5a08">
                    <div>
                        <div id="image_header" class="s-bg-image s-bg-light-text s-new-title-section s-section transition"><!-- react-text: 51 -->
                            <div class="container">Test</div>
                        </div>
                    </div>
                </li>
            </ul>
            <ul>
                <h1>Content</h1>
                <p style="font-size: 55px; padding: 10px;">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </ul>
        </div>
    </div>

</body>
</html>

<强> size.js

function updatePaddings() {
    var imageHeader = $("#image_header");
    var smallWindow = $(window).width() <= 727 || $(window).height() < 400;

    var content = imageHeader.find(".container").first()
    var contentHeight = content.height();

    var topPaddingInitial = imageHeader.css("paddingTop");
    var bottomPaddingInitial = imageHeader.css("paddingBottom");
    imageHeader.css("paddingTop", "");
    imageHeader.css("paddingBottom", "");
    var d = Math.min(100, parseInt(imageHeader.css("padding-top"), 10))
    var c = Math.min(100, parseInt(imageHeader.css("padding-bottom"), 10))

    var windowHeight = $(window).outerHeight();

    var tempPadding = .5 * (windowHeight - contentHeight)

    var newPaddingTop = Math.max(Math.min(450, Math.floor(tempPadding)), d)
    var newPaddingBottom = Math.max(Math.min(450, Math.ceil(tempPadding)), c)

    imageHeader.css("paddingTop", newPaddingTop);
    imageHeader.css("paddingBottom", newPaddingBottom);
}

$(document).ready(function () {
    updatePaddings();
});

$(window).resize(function () {
    updatePaddings();
});

响应地缩放不同屏幕宽度的英雄图像

2 个答案: