Question

我正在尝试创建一个在所有屏幕上都很好地居中的完整容器图像。

<body>

<!-- Preloader -->
<div class="page-loader">
    <div class="loader">Loading...</div>
</div>

<!-- Navigation start -->
<nav class="navbar navbar-custom navbar-transparent navbar-fixed-top">

    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="index.html">
                <img src="assets/images/kerriwalshjenningswhite.png"  alt="Kerri Walsh">
            </a>
        </div>

        <div class="collapse navbar-collapse" id="custom-collapse">

            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="https://www.kerriwalshjennings.co">Home</a>
                </li>

                        <li class="dropdown">
                        <a href="http://www.kerriwalshjennings.co/pages/gallery.html" target="_blank">Gallery</a>
                    </li>

                    <li class="dropdown">
                        <a href="http://www.kerriwalshjennings.co/pages/sponsors.html" target="_blank">Sponsors</a>
                    </li>

                    <li class="dropdown">
                        <a href="http://www.kerriwalshjennings.co/pages/bio.html" target="_blank">Bio</a>
                    </li>

                    <li class="dropdown">
                        <a href="http://www.kerriwalshjennings.co/pages/contact.html" target="_blank">Contact</a>
                    </li>

        </div>

    </div>

</nav>
<!-- Navigation end -->

<!-- Home start -->
<section id="home" class="home-section home-parallax home-fade kenburns home-full-height">

    <div class="hero-slider">
        <ul class="slides">

            <li class="bg-light-30">
                <div class="img">
                    <img src="assets/images/kerribig4.jpg" />
                </div>

                <div class="hs-caption">
                    <div class="caption-content">
                        <p class="hs-title-size-1 font-serif mb-30">
                            Hello & welcome
                        </p>
                        <h1 class="hs-title-size-5 font-alt mb-40">
                            I am Kerri Walsh
                        </h1>
                        <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a>
                    </div>
                </div>
            </li>

            <li class="bg-light">
                <div class="img">
                    <img src="assets/images/kerribig3.jpg" />
                </div>

                <div class="hs-caption">
                    <div class="caption-content">
                        <p class="hs-title-size-1 font-serif mb-30">
                            I am
                        </p>
                        <h1 class="hs-title-size-5 font-alt mb-40">
                            A Mother
                        </h1>
                        <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a>
                    </div>
                </div>
            </li>

            <li class="bg-light">
                <div class="img">
                    <img src="assets/images/kerribig2.jpg" />
                </div>

                <div class="hs-caption">
                    <div class="caption-content">
                        <p class="hs-title-size-1 font-serif mb-30">
                            I am
                        </p>
                        <h1 class="hs-title-size-5 font-alt mb-40">
                            An Olympian
                        </h1>
                        <a href="#about" class="section-scroll btn btn-border-w btn-circle">Learn More</a>
                    </div>
                </div>
            </li>

        </ul>
    </div>

</section >
<!-- Home end -->

然后这是我的style.css的第一部分。我需要让这个图像显示在手机屏幕的中央，这样你才能真正看到Kerri Walsh

html {
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: scrollbar;
}

body {
    background: #fff;
    font: 400 13px/1.8 "Lato", sans-serif;
    color: #666;
    -webkit-font-smoothing: antialiased;
}

img {
    /*width: 100%; */
    height: 100%;
}

Answer 1

如果您希望这是一张我认为您想要的背景图片。然后你可以使用这个方法：

.home-section {
  /* Location of the image */
  background-image: url(images/background-photo.jpg);

  /* Background image is centered vertically and horizontally at all times */
  background-position: center center;

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

它具有响应性，并且在所有屏幕上看起来都很好。是的，您可以使用jQuery或本机JavaScript更改背景图像，就像您使用图像一样。

致以最诚挚的问候，

我的英雄形象不以移动为中心

1 个答案: