Question

我有一个半复杂的网站，藏在一堆<div>里面是一个图像，我需要将图像向上移动x个像素。我隐藏了溢出，因此它会在底部剪切图像（如预期的那样），但我无法将图像移动到我想要的位置，宽度保持100％，图像来自底部

以下是代码的jsfiddle

#DIV_8 {
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;

    overflow: hidden;
}

#DIV_9 {
    max-height: 250px;
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 1

这是你在找什么？

＆＃13;

#DIV_8 {
  position: relative;
  cursor: pointer;
  border-style: solid;
  border-width: 1px;
  height: 200px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  width: 300px;
  overflow: hidden;
}
#DIV_9 {
  position: absolute;
  bottom: -20px;
  width: 100%;
  height: auto;
  display: inline-block;
  max-width: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#DIV_9 img {
  width: 100%;
}

＆＃13;

<div id="DIV_1">
  <div id="DIV_2">
    <div id="DIV_3">
      <div id="DIV_4">
        <div id="DIV_5">
          <div id="DIV_6">
            <div id="DIV_7">
              <div id="DIV_8">
                <div id="DIV_9">
                  <img src="http://img11.deviantart.net/a412/i/2012/145/9/9/google_chrome_by_juniorgustabo-d513nlo.png" width="360" height="308" alt="brazil" id="IMG_10" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>

＆＃13;

Answer 2

似乎可以通过添加：

来工作

"groups": {
  ".write": "root.child('users').child(auth.uid).child('group').exists() == false",
   "$objectType": {
    "members": {
      ".validate": "
        auth != null && 
        newData.val() == auth.uid && 
        newData.parent().parent().parent().child('group-invites').child(auth.uid).child($objectType).exists() != null && 
        newData.parent().parent().parent().child('groups').child($objectType).child('members-invited').child(auth.uid).exists() != null
      ",
      ".read": "root.child('groups').child($objectType).child('members').child(auth.uid).exists() != null",
      ".write": "auth != null && root.child('users').child(auth.uid).child('group').exists() == false"
    },
    "name": {
      ".read": "root.child('groups').child($objectType).child('members').child(auth.uid).exists() != null",
      ".write": "root.child('users').child(auth.uid).child('group').exists() == false"
    },
    "owner": {
      ".read": "root.child('groups').child($objectType).child('members').child(auth.uid).exists() != null",
      ".write": "root.child('users').child(auth.uid).child('group').exists() == false"
    }
  }

}
"users": {
  "$uid": {
    ".read": "auth.uid == $uid",
    ".write": "auth.uid == $uid"
  }
}

调整#DIV_9 { position: relative; top: -20px; }可上下移动图像。

https://jsfiddle.net/y197yjp2/

Answer 3

只使用负面的负边距

#DIV_8 {
    cursor: pointer;
    border-style: solid;
    border-width: 1px;
    height: 200px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    width: 300px;

    overflow: hidden;
}

 #DIV_9 {
    max-height: 250px;
    width: 100%;
    height: auto;
    display: inline-block;
    vertical-align: bottom;
    max-width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: -20px;
 }

如何在div中移动图像？

3 个答案: