Question

如何在另一个上添加图像并保持响应度？基本上我需要的是一个图像，它位于一个图像和一个容器之间。我正在使用Bootstrap。

附上截图。

我尝试使用float，position: absolute;等不同变体，但在调整屏幕大小时似乎没有任何效果。

尝试找到关于此的信息，但坦率地说我不知道如何制定问题以便找到答案。

链接：http://euro-tax.connectmedia.ro/

Answer 1

使用position:absolute，您可以使用calc属性来定义元素的位置。你只需要做一些计算。在我的情况下，我设置left:calc(50% - 21px)，这意味着50% - half-width of element。这将在任何视口中设置元素在任何父元素中心的位置。

div{
  position:relative;
}
.absoluteImage{
  position:absolute;
  bottom:15px;
  left:calc(50% - 21px);
}

<div>
  <img style="width:100%" src="http://euro-tax.connectmedia.ro/wp-content/themes/euro-tax/images/xheader-bg.jpg.pagespeed.ic.CWwqtcTBRJ.jpg">
  
  <img class="absoluteImage" src="data:image/webp;base64,UklGRm4BAABXRUJQVlA4TGEBAAAvKkAFEF9CEAgSyftj7TIEQbZNQeYv9oMQZNuUeee4s8K2bdtcZDvdzaxar35AAAIAIBAEwzCCBjA2jEAwGgcgGGiA4GMhmGgIDwIwGgMDD4IAggYwwAQAgRBMAKNhBEAQeEBsJEmRVL3H/H/MzMxMz9D++7MwPbsmRPQ/YdZuP4skvJOdnP/c6mQaXbavGXgmK3Nlu2sMWXkvwyuZpTdWhp+s/jXhkZp/rH5uWA588OLrs9wkdixnEbhHZiy3CYSnLA8puKX2LKdhgmn0WN6z0GfvLHsGmbAb3yw+KtBVPlh8N8iGU3yy+G9Btv5ZPIvkQElfWI78cPwjlpc0KVDja5bLKKzokuU6TipEcMLylA/lTywnQRKQRoe9dQyS0NW+2P2rRjpoCw92exRAOuhfz6w/v8AkHVxiK9atYrBIB7fAmOU4AJt0cG+z2oZCOniofrD1UYVKOnjJHX+POQjSAQA=" >
<div>

Answer 2

试试这个：

将锚点移出.bannerbox，如下面显示的HTML，并将类show-more添加到其中。

对于自适应视图，请调整background-position的{{1}}值 .bannerhead类值可在移动视图中使用获取所需结果媒体查询。

HTML：

.show-more

CSS：

<div class="bannerbox col-md-8">
  <h1>Recuperarea Taxelor si 
                Alocatiilor din strainatate</h1>

  <p style="font-weight:300;">Ai obtinut venituri din strainatate? Înseamna ca poti obtine restituirea impozitelor platite acolo.<br> Dar si alocatiile europene, ori alte taxe si asigurari pot fi recuperate. Afla acum ce drepturi ai si solicita înapoisuma maxima posibila.</p>

</div>
<a href="#section2" rel="m_PageScroll2id" class="_mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last show-more"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAWCAMAAABuZ5WBAAAA5FBMVEXjHnL////jHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnLjHnL1kVINAAAAS3RSTlMAAAEDBAYHCAkNDxEUFxoeIyQnMDM3OTxBS0xQVltcYG11eYCFh5OVlpmepKq2uLq7v8TFyMnQ0dLW2Nzj5Ofs7/P09vj5+vv8/f6BxUE3AAABG0lEQVQoz43T11bCYBAE4NlQpKN0hUhXqlIs9GIowr7/+3hBsqSQHPcqM/Odk6sfgLo8vifgdkREibfj8pkISoOZeZH2sOkFM3NDQYuZmfnnydU+bi+khd3lg08VF1s56WKHMRv36rtBfS+yjxH/lNAPO2i4L+tHHAj1JH4nbTT5JVsvRACUphSrjIVmVrI0FSIAQPlgVFrRRIuaUR/KRLpFYWO056rQ6tkoNwW6WqTm8re2HwDgb0szT5HZIjaSaRABEBlIHsXIahHsyjjN3eWmkrpBslsodb51dYWcFlD3DrlXiW5a5Nc2us7DzeJhZqGze7hbRIcmOozCyyLQEdoJwNsCNZ3Wrm/I1aKkMbNWwn8sspPfSRZO+wc672iCowb7mQAAAABJRU5ErkJggg=="
    class="center-block" style="padding-bottom:10px;" data-pagespeed-url-hash="1407470906" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"></a>

Answer 3

在您的父元素

中设置position:relative

div.bannerhead {
  position: relative;
}

然后像这样设置子元素：

<div classs="bannerhead">
    <img class="center-block" src="" >
</div>

现在为absolute或子元素设置CSS，如下所示：

img.center-block {
   position: absolute;
   bottom: -30px;
   left: 0;
   right: 0;  
   margin: 0 auto;
   z-index: 99;
   cursor: pointer;
}

您可以在每个新元素中应用此规则。我已经测试过应用这个规则，它对我有用。

Answer 4

您可以尝试使用网格布局。创建一个包含div并将容器，图像和图像作为子项放置。比使用网格布局属性来居中它们。

<强> HTML

<div id="grid-container">
  <img src="#" id="img1">
  <img src="#" id="center-img">
  <div id="container"></div>
</div>

<强>的CSS

#grid-container {
  display: grid;
  grid-template-rows: 1;
  grid-template-columns: auto 10px auto;
}

center-img {
  width: 10px;
  height: 10px;
}

注意：这对目前的任何浏览器都不起作用，因为必须手动启用网格布局功能。

容器之间的中心图像，同时保持响应性

4 个答案: