在两个div之间插入图像

Question

我需要在div（蓝色和浅蓝色）之间插入照片，如下例所示。

我用绝对定位做到了：

HTML：

    @*Blue and light-blue sections with photo*@
    <div style="width: 100%; height: 120px; background-color: #0052a4"></div>
    <div style="width: 100%; height: 120px; background-color: #c2dffd">
        <div class="image">
            <img src="/Content/pictures/MainPhoto.png" />
        </div>
    </div>

CSS：

.image {
    position: absolute;
    bottom: -100px; /* bottom space */
    right: 100px; /* right space */
}
.image img {
    display: block;
}

但是当您更改设备的屏幕分辨率时，这种方式无法正常工作。

我用这个例子创建了JSFiddle。

您能否建议另一种解决此问题的方法？ 我需要创建没有硬编码值的响应式设计。

谢谢！ ：）

Answer 1

您可以使用背景和填充来保持图像的边缘： DEMO

HTML

<div class="imaged">
  <img src="http://lorempixel.com/800/180/food/7"/>
</div>

CSS

.imaged {
  padding:20px;
  text-align:center;
  background:url(my-blue-light-blue-bg.jpg)repeat-x center ;
}
img {
  border:solid white 4px;
  vertical-align:top;/* or display:block; + margin:auto;*/
}

---

来自你的小提琴：单个div中的插入框阴影也适用： DEMO 2 / DEMO 3

<div style="
padding:0 20px;
display:table;
min-width: 100%;
box-shadow:
inset 0 120px 0 #0052a4,
inset 0 -120px 0 #c2dffd;
height:244px;
line-height:244px;
text-align:center;
">
    <img src="http://lorempixel.com/842/176/city" style="border:solid white 4px;"/>
</div>

Answer 2

HTML

 <div class="container-box">
    <div style="width: 100%; height: 120px; background-color: #0052a4"></div>
    <div style="width: 100%; height: 120px; background-color: #c2dffd"></div>
    <div class="image">
        <img src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg" />
    </div>
</div>

CSS

 .container-box {
    position:relative;
}
.container-box img {
    height:200px;
    width:90%;
    position:absolute;
    top:20px;
    left:5%;
    border:3px solid #fff
}

当然我从不使用内联CSS，但你去了。 See fiddle这里

Answer 3

我认为这就是你要做的事情：

http://jsfiddle.net/dc6r1bny/

.image {
    position: absolute;
    bottom: 30px; /* bottom height */
    left: 50%; /* position element 50% from left side */
    margin-left: -421px; /* bring it back left half the image size */
}

然后对于移动设备，您只需要使用媒体查询将图像大小调整为100％，删除边距等等，当您达到大约842px时。

Answer 4

将此css代码添加到图像中。它应该工作。

margin-right:auto;
margin-left:auto;