在一个部分的左侧剪切图像，并防止它随着 window 缩放而移动

Question

我有主页英雄，我想创建，我想在左边剪掉一张图片。我运行遇到的问题是如何处理图像缩小并越来越向左切断？有没有办法解决这个问题，只能创建一堆媒体查询？

将图像内嵌移动 HTML，而不是将其作为背景放在 div 中会更好吗？（我试过这个方法，也没有用。）

.hero {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 640px;
  max-width: -webkit-fill-available;
}

.hero-image {
  width: 979px;
  height: 1000px;
  background-repeat: no-repeat;
  background-image: url(http://www.pngmart.com/files/1/Audi-Car-Front-View-PNG.png);
  background-position: center;
  position: absolute;
  right: 65%;
  top: -39%;
}

<section class="hero">
  <div class="hero-image"></div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-lg-push-5">
        <h1>Hero Header Here</h1>
        <p>Hero text here.</p>
      </div>
    </div>
  </div>
</section>

https://jsfiddle.net/ncsztfmg/

Answer 1

您可以将图像设置为主要部分的背景并将其放置在 背景位置 x

这里是css

.hero {
  position: relative;
  overflow-x:  hidden;
  overflow-y: hidden;
  height: 640px;
  max-width: -webkit-fill-available;
  background-image: url(http://www.pngmart.com/files/1/Audi-Car-Front-View-PNG.png);
  background-position-x:-600px;
  background-repeat: no-repeat;
}

https://jsfiddle.net/ncsztfmg/1/

Answer 2

而不是 right:65%，给它 left:-700px（-700px 或根据您的图片方便的任何值）。

Not a Percentage value, as it will force your image to reposition.

.hero {
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  height: 640px;
  max-width: -webkit-fill-available;
}

.hero-image {
  width: 979px;
  height: 1000px;
  background-repeat: no-repeat;
  background-image: url(http://www.pngmart.com/files/1/Audi-Car-Front-View-PNG.png);
  background-position: center;
  position: absolute;
  left: -700px;
  top: -39%;
}

.container {
  width: 100%;
  height: auto;
  max-width: 100%;
}

<section class="hero">
  <div class="hero-image"></div>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>Hero Header Here</h1>
        <p>Hero text here.</p>
      </div>
    </div>
  </div>
</section>

在一个部分的左侧剪切图像，并防止它随着 window 缩放而移动

Cut image off to the left inside of a section, and prevent it from moving as the window scales

html

css

responsive-design

twitter-bootstrap

responsive-images