Question

我想剪裁太高的图像。但是＆＃34;溢出：隐藏＆＃34;什么也没做。

这是我的HTML：

<body id="index_body">
  <div id="panel">
     <div class="user_container">
       <img class="photo_thumbnail" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRRK4PrgJXJ05LYI33B5rqX4xh18UIUQ_kqplT_rXheF5bqPHrE"/>            
     </div>
     . . .
  </div>
</body>

这是我的CSS：

#index_body {
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}

#panel {
    display: inline-block; 
    width: 90%;
    margin: auto;
    text-align: left;
}

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
}

.photo_thumbnail {
    margin: 0;
    z-index: 1;
    position: absolute;
    border-radius: 5px;
    border: 2px gray solid;
    width: 170px; 
    overflow: hidden;
 }

在此处查看此行动：http://jsfiddle.net/9oLzynbx/1/。

其他人报告了一个溢出问题，当它归因于它的img不在父div中，其位置为：relative。见：overflow: hidden not working。但这不是我的问题。

感谢您的帮助！

Answer 1

你需要把：

 overflow: hidden;

在容器上：.user_container

Answer 2

将overflow: hidden提供给.user_container：

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
    overflow: hidden;
}

预览：

小提琴：http://jsfiddle.net/praveenscience/9oLzynbx/7/

Answer 3

试试这段代码

.user_container {
    margin: 15px;
    border-radius: 5px;
    position: relative;
    width: 170px;
    height: 170px;
    z-index: 1;
    display: inline-block;
    border: 2px dashed blue;
    overflow: hidden;
}

溢出隐藏不起作用，父亲亲属的位置

3 个答案:

预览：

小提琴：http://jsfiddle.net/praveenscience/9oLzynbx/7/