时间戳

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

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

问题描述

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

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

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

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

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

解决方案

编辑：以下解决方案仅适用于 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所做的事情。我可以理解您必须处理的限制，所以我希望这会有所帮助！

推荐阅读