Question

我有一个设计上的问题，我不确定如何解决。

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div id="container">
  <img src="http://paralyzed.scork.net/img/splasher.png" class="img-fluid d-block mx-auto" id="splash" border="0" />
  <div id="overlay">
    <img src="http://paralyzed.scork.net/img/facebook.svg" alt="Facebook" border="0" width="40" />&emsp;
    <img src="http://paralyzed.scork.net/img/instagram.svg" alt="Instagram" border="0" width="40" />&emsp;
    <img src="http://paralyzed.scork.net/img/youtube.svg" alt="YouTube" border="0" width="40">
  </div>
</div>

jsfiddle

我有一个主图像，想要覆盖一些社交媒体图标。到目前为止，一切都很好。但我想通过使用百分比作为宽度/高度来使它们响应。我这样做后，社交媒体图标不再居中，而是向左移动。

您有什么想法，如何解决？现在已经在这个地方工作了几个小时，并尝试了很多变化，但是对我来说没有任何作用。

我的目标是在桌面上使用较大的图标，在移动设备上使用较小的图标。

Answer 1

更改了这些样式

    #container {
      position: relative;
      width: 100%;
    }

    img.abc {
      width: 100%;
    }

    #overlay {
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
  width :100%;
  text-align: center;
}

查看更新后的fiddle

body {
	background-color: #000000 !important;
}

#container {
	position: relative;
	width: 100%;
}

#overlay {
	position: absolute;
	bottom: 5%;
	left: 50%;
	transform: translateX(-50%);
  width :100%;
  text-align: center;
}
.bg-image {
  width: 100%;
}
#overlay-image {
	width: 10%;
}

		<div id="container">
			<img src="http://paralyzed.scork.net/img/splasher.png" class="img-fluid d-block mx-auto bg-image" id="splash" border="0" />
			<div id="overlay">
				<img src="http://paralyzed.scork.net/img/facebook.svg" alt="Facebook" border="0" id="overlay-image" />&emsp;
				<img src="http://paralyzed.scork.net/img/instagram.svg" alt="Instagram" border="0" id="overlay-image" />&emsp;
				<img src="http://paralyzed.scork.net/img/youtube.svg" alt="YouTube" border="0" id="overlay-image" />
			</div>
		</div>

宽度百分比未居中

1 个答案: