如何使图像上的左偏置使其与所有视口上的文本保持一致

Question

我想知道如何从左侧抵消div/映像等，以使此图像与上面的文本对齐。

我已经在flatStudios网站上看到了它http://flatstudio.co/page-header映像与H1对齐的地方。

我已经尝试在小提琴中做这个，但我似乎无法让这个工作

请参阅此处：https：//jsfiddle.net/csxqhj8p/2/

.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    position: absolute;
    width: 100%;
    min-height: 630px;
    background-size: cover;
    left: 58%;
    transform: translateX(-50%);
    -web-kit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
}

Answer 1

左侧带有填充，而女士的头是一个单独的图像，向右对齐。这是一个窍门。

调整大小应该因此：

$( window ).resize(function() {
    //do something you like with $(document).width() to make your new padding
    $("#theidofoneofyourdivs").css({"padding-left": ($(document).width() / 10)}); //for example
});

Answer 2

.page-header {
    width: 100%;
    min-height: 400px;
}
.page-header-content {
    padding: 30px 0 88px 20vw;
}
.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;
    align-items: left;
    justify-content: start;
}
.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    margin: 0px;
}
.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}
.content-image {
  padding: 0 0 0 20vw;
}
.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    width: 100%;
    min-height: 630px;
    background-size: cover;
}

Answer 3

编辑：使用此

html

<section class="page-header">
    <div class="page-header-content">

        <div class="page-header-text-container">
            <h1>LoremIpsun<br/>Dolerea Est</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
        </div> <!-- page-header-text-container end -->
    </div> <!-- page-header-content end --> 
</section> <!-- page-header end -->
<section class="content-image">
    <div class="top-image">
    </div>
</section>

CSS

.page-header {
    width: 100%;
    min-height: 400px;
}
.page-header-content {
    padding: 30px 0 88px;
}
.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;
}
.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    padding-left: 15px;
    margin: 0px;
}
.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}
.content-image {
    display: block;
    max-width: 1170px;
    margin: auto;
    width: 100%;
    height: 100%;
    /*background: #eee;*/
    /*padding-left: 8%;*/
}
.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    margin-left: 15px;
    min-height: 630px;
    background-size: cover;
    
}

<section class="page-header">
    <div class="page-header-content">
        
        <div class="page-header-text-container">
            <h1>LoremIpsun<br/>Dolerea Est</h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</p>
        </div> <!-- page-header-text-container end -->
    </div> <!-- page-header-content end --> 
</section> <!-- page-header end -->
<section class="content-image">
    <div class="top-image">
        
    </div>
</section>

.page-header {
    width: 100%;
    min-height: 400px;
}
.page-header-content {
    padding: 30px 0 88px;
}
.page-header-text-container {
    width: 100%;
    max-width: 1170px;
    margin: 70px auto 0px;
    position: relative;
    display: flex;
}
.page-header h1 {
    font-size: 45px;
    font-weight: bold;
    line-height: 1.1;
    padding-left: 15px;
    margin: 0px;
}
.page-header p {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 10%;
    max-width: 460px;
    margin: 0px;
}
.content-image {
    display: block;
    max-width: 1170px;
    margin: auto;
    width: 100%;
    height: 100%;
    /*background: #eee;*/
    /*padding-left: 8%;*/
}
.top-image {
    background-image: url(http://via.placeholder.com/1305x630);
    background-position: center center;
    background-repeat: no-repeat; 
    margin-left: 15px;
    min-height: 630px;
    background-size: cover;
}