如何在div中移動圖片？

Question

我有一個半複雜的網站，並藏在一堆<div>是一個圖像，我需要該圖像被移動x個像素。我有溢出隱藏，以便它將在底部切斷圖像（如預期的），但我不能讓圖像移動到我想要的位置，寬度保持100％，圖像來自底部

下面是代碼

#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

似乎通過增加工作：

#DIV_9 { 
    position: relative; 
    top: -20px; 
} 

調整top移動圖像上下。

https://jsfiddle.net/y197yjp2/

Answer 2

的jsfiddle這是你在找什麼？

#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%; 
 
}

<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>

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; 
}