Question

感谢您对CSS的帮助。我将横幅图像与inline-css一起使用background-image放置。我现在需要使用img标签进行放置，并使用CSS定位父对象。不幸的是，我的图像无法像在inline-css中一样调整大小。

这是我的CSS代码。请查看整页并调整页面大小。

我喜欢的“效果”是在移动图像上仅显示图像的中心，而在页面宽度增加时，通过将图像的中心作为位置的基础来调整图像的大小。请参见示例的第二张图片（称为banner-two）。

因此，如何使用background-image完全按照横幅二中的图像重新创建图像，但现在将图像放置为img src。

我还使用自己的代码创建了一个代码笔（link to my code in codepen-请同时调整大小）。

.banner-two {
  background-size: cover;
  background-position: center center;
  height: 240px;
  width: 100%;
}

@media (min-width: 768px) {
	.banner-two {
		height: 480px;
	}
}

@media (min-width: 1200px) {
  .banner-two {
		height: 680px;
	}
}

<div class="banner-one">
  		<img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg"  />
</div>

<section>
<div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>

Answer 1

编辑：以下解决方案仅在Firefox中有效；我似乎无法使其在其他浏览器中正常工作。我会暂时保留它，以防它在正确的方向上帮助人们，但是当有更好的解决方案出现时，我会删除它。

只需将横幅放在正确的位置即可。

.banner-one {
  height: 240px;
  display: inline-block;
  position: relative;
  left: 50vw;
  transform: translateX(-50%);
}

.banner-one img {
  height: 100%;
}

.banner-two {
  background-size: cover;
  background-position: center center;
  height: 240px;
  width: 100%;
}

@media (min-width: 768px) {
  .banner-one,
  .banner-two {
    height: 480px;
  }
}

@media (min-width: 1200px) {
  .banner-one,
  .banner-two {
    height: 680px;
  }
}

<div class="banner-one">
  <img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

<section>
  <div class="banner-two" style="background-image: url('https://pictr.com/images/2018/10/06/06cVw2.jpg')"></div>
</section>

但是问题是，为什么要这样做。您需要更多的CSS才能完成这项工作！我的直觉是简单地隐藏img，然后继续处理横幅2。我可以理解，尽管有一些约束需要您配合，所以希望对您有所帮助！

Answer 2

.banner-one {
    width: 100%;
    height: 640px;
    display: flex;
    justify-content: center;
}
.banner-one img {
    max-width: 100%;
}

Answer 3

直到现在，这里是代码。由于图像已完全居中，Banner-flex无法正常工作。标语转换工作正常。 link to examples on codepen

我确实想知道是否有一种方法可以说是更好或更有效。

再次感谢！

<div class="banner-flex">
  <img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

<div class="banner-transform">
  <img alt="" src="https://pictr.com/images/2018/10/06/06cVw2.jpg" />
</div>

.banner-flex {
width: 100%;
height: 240px;
display: flex;
justify-content: center;
}
.banner-flex img {
   max-width: 100%;
}

.banner-transform {
 height: 240px;
 display: inline-block;
 position: relative;
 left: 50vw;
 transform: translateX(-50%);
 }

.banner-transform img {
  height: 100%;
}

@media (min-width: 768px) {
 .banner-flex,
 .banner-transform {
    height: 480px;
 }
}

@media (min-width: 1200px) {
.banner-flex,
.banner-transform {
    height: 680px;
 }
}

@media (min-width: 1800px) {
.banner-transform img {
    width: 100vw;
 }
}

如何使用img标签而不是inline-css（图像的位置中心）放置横幅背景图像

3 个答案: