Question

这可能是一个非常简单的问题，但我不知道如何做到这一点。宽度设置为100％，高度为auto。我想从底部隐藏200px，但margin-bottom: -200px无效。

＆＃13;

.banner {
  width: 100%;
  height: auto;
}

.banner-photo {
  width: 100%;
  height: auto;
}

.banner-photo img {
  width: 100%;
  height: auto;
}

＆＃13;

<div class="banner">
  <div class="banner-photo">
    <img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/>
  </div>
</div>

＆＃13;

Answer 1

你可以像这样创建一个div，它会有效地隐藏底部的200px：

div {
    height: 200px;
    width: 100%;
    position: fixed;
    bottom:0;   
    background-color: white;
    z-index: 100;
}

Answer 2

您的内容（margin-bottom）和img上的内容需要为overflow: hidden。

我从你的小提琴例子中隐藏了200px - 注意它没有多少显示！

.banner {
  width: 100%;
  height: auto;
}

.banner-photo {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.banner-photo img{
  width: 100%;
  height: auto;
  margin-bottom: -200px;
}

<div class="banner">
  <div class="banner-photo">
    <img src="https://media-exp1.licdn.com/media/AAEAAQAAAAAAAANbAAAAJDE5NjBkNDk1LTY3ZGQtNDA0NS04YTJiLTdkNmU3NjZiNjI3Mg.png"/>
  </div>
</div>

宽度100％，保证金自动且不工作保证金 - 底部

2 个答案: