Question

嘿所以我似乎无法用我的形象来解决问题？我尝试过使用包装器，但图像似乎不想隐藏在容器外面？我也试过使用z-index，但似乎也没有用。

HTML：

<div id="hillcontainer"> 
    <img src="images\hilltop1.jpg" class="hill" alt="photo">
    <a href="hilltop.html"/></a>
</div>

的CSS：

div#hillcontainer{
    position: fixed;
    top:90px;
    left: 378px;
    width: 240px;
    height: 180px;
    border: 1px white solid;
    padding:20px;
    overflow: hidden;
}

img.hill {
    position: fixed;
    top:70px;
    left: 400px;
    width: 250px;
    height: 150px;
    transform: scale(1, 1);
    /*transition:*/
}

Answer 1

为什么要将position:fixed提供给图片？这将产生相同的预期效果：

＆＃13;

div#hillcontainer{
  position: fixed;
  top:90px;
  left: 378px;
  width: 240px;
  height: 180px;
  border: 1px white solid;
  padding:20px;
  overflow: hidden;
}
img.hill {
  display:block;
  position: relative;
    width: 100%; // case you want to fit it, else remove the width

}

＆＃13;

<div id="hillcontainer"> 
  <img src="http://dummyimage.com/600x150/000/fff"  class="hill" alt="photo"/>
  <a href="hilltop.html"/></a>
</div>

＆＃13;

图像无法正常溢出

1 个答案: