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

【问题标题】：How to position a banner background image using img tag instead of inline-css ( position center of image)如何使用 img 标签而不是 inline-css 定位横幅背景图像（图像的位置中心）
【发布时间】：2019-03-11 14:10:31
【问题描述】：

感谢您对 CSS 的帮助。我正在使用带有 inline-css 的背景图像放置我的横幅图像。我现在需要使用 img 标签放置并很好地使用 css 定位父级。不幸的是，我的图像没有像在 inline-css 中那样调整大小。

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

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

那么如何使用 background-image 重新创建与横幅 2 中的图像完全相同的图像，但现在将图像放置为 img src。

我还用我的代码创建了一个 codepen（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>

【问题讨论】：

标签： css

【解决方案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，然后继续你对banner-2所做的事情。我可以理解您必须遵守一些限制，所以我希望这会有所帮助！

【讨论】：

李斯特先生感谢您的指导。您的代码似乎工作正常，我进行了编辑，因为在 Chrome 上，img 的扩展没有超过原始大小，所以我添加了一个媒体来增加宽度：100vw at 1800px。我用新代码 codepen.io/tokyoweb/pen/VEKbNB 创建了一个 codepen，它正在使用 mac safari、mac chrome 和 mac firefox。我还不知道在 Windows 上，但我猜是的。非常感谢你的帮助。我确实想知道为什么要使用 left: 50vw 和 transform -50% ？强制浏览器使用图像的中心作为定位的基础？
原因是我现在使用延迟加载 javascript 和 img srcset 然后使用 img 标签时代码更容易。代码现在是这样的......

【解决方案2】：

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

【讨论】：

谢谢亚当。您的帮助。 Flex 是我尝试过的一种方法，但我没能成功。使用 flex vs transform codepen.io/tokyoweb/pen/XxjgJa 查看您的代码图像已完全调整大小，因为图像是横幅，然后宽度很大，然后我只想在浏览器宽度较小时显示图像的中心而不是调整所有图像的大小。我对你的代码做错了吗？代码flex称为banner-flex，下面的代码使用transform称为banner-transform。我理解 flex 比 transform 更好，并且我读到 flex 比使用 transform 更有效。再次感谢。

【解决方案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;
 }
}

【讨论】：