我想像我发布的那样在底部使用弯曲的图像

Question

我想创造这个。

到目前为止我所拥有的是这一点，但随着屏幕尺寸的变化，它没有响应。它保持特定的宽度，这就是我想用图像替换它的原因

<div class="container-fluid">
   <div class="betn-footer">
   </div>
</div>

.betn-footer{
    background-color:#f4f3f3;
    height:50px;
    text-align:center;
    position:absolute;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
    margin-top:-20px;
    margin-left:65px;
    width:973.88px;
    box-shadow: 0 21px 30px -10px #080808;
}

告诉我是否还有其他选择。谢谢！

Answer 1

你不应该使用margin-left而是将页脚/你的内容置于 margin：0 auto 的中心。然后，您可以使用％

将页脚宽度设置为灵活宽度

Answer 2

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

它将始终在页面中央显示图片。

Answer 3

只需移除固定的宽度和边距：

＆＃13;

＆＃13;

.container-fluid { margin-bottom: 2em; }

.betn-footer {
  background-color: #f4f3f3;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  box-shadow: 0 21px 30px -10px #080808;
}

＆＃13;

<div class="container-fluid" style="width:200px;">
   <div class="betn-footer"></div>
</div>

<div class="container-fluid" style="width:500px;">
   <div class="betn-footer"></div>
</div>

<div class="container-fluid" style="width:1000px;">
   <div class="betn-footer"></div>
</div>

＆＃13;

＆＃13;

＆＃13;