如何使div达到500％但仍然居中

Question

我的图片类似于b

我试图在底部获得一条无限的线，所以无论屏幕哪条线都填满了屏幕的宽度。

我裁剪了我的图片并将其设置为div的底部所以我可以使用寄宿生但是当我使用时

.row2{
  position: absolute;
  width:500%;
  overflow: hidden;
}

div似乎向右伸展510％，而不是向左伸展250，向右伸展250，并保持我的图像大小相同（它也将我的图像移动到div的中心，以便离开屏幕）< / p>

这是我的HTML：

 <div class="row row2">
   <div class="col-xl-12 hscentertext" style="">
      <img src="assets/img/25k.png" class="img-fluid center-block text-xl-center" alt="Responsive image"> 
    </div>
 </div>

我使用bootstrap。提前谢谢。

Answer 1

没有必要使用position: absolute;：

html, body {
  background: red;
  margin: 0;
  padding: 0;
}

.row2 {
  width: 100%;
  border-bottom: 1px solid white;
}

.row2 .hscentertext {
  text-align: center;
}

<div class="row row2">
  <div class="col-xl-12 hscentertext" style="">
    <img src="http://placehold.it/200x200" class="img-fluid center-block text-xl-center" alt="Responsive image"> 
  </div>
</div>

除非您有其他理由使用position: absolute;，否则在哪种情况下可以将其与变换对齐：

.selector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

通过使用translateX(-50%);技巧，元素将始终居中，无论其宽度如何。

Answer 2

由于您没有提供图像，我重新制作了一个：切断下面代码段的边缘：

＆＃13;

＆＃13;

.myimg {
  background-color: #D52226;
/* draw the line behind*/
  background-image: linear-gradient(to top, transparent 3px, white 3px, white 5px, transparent 5px);
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row row2">
  <div class="col-xl-12 hscentertext myimg" style="">
    <img src="https://i.stack.imgur.com/Bf9Cy.jpg" class="img-fluid center-block text-xl-center" alt="Responsive image">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;  使用的图像的宽度可以减少到它所持有的文本。

可以在容器的背景上绘制线条。 它可以是在背景颜色上重复的渐变或几个像素点。 display：flex也可以通过translucide png工作，它允许修改背景：example。

＆＃13;

＆＃13;

.myimg {
  display: flex;
  background-color: #D52226;
}
.myimg:before,
.myimg:after {
  content: '';
  flex: 1;
  background: linear-gradient(to top, transparent 3px, white 3px, white 5px, transparent 5px);
}
.myimg:hover {
  background-color: #4195BE
}

＆＃13;

<div class="row row2">
  <div class="col-xl-12 hscentertext myimg">
    <img src="https://i.stack.imgur.com/37doI.png" class="img-fluid center-block text-xl-center" alt="Responsive image">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;