Wie verschiebe ich ein Bild in einem div?

Question

Ich habe eine halb komplizierte Website, und versteckt in einer Reihe von <div> ist ein Bild, ich brauche das Bild nach oben x Anzahl der Pixel bewegt werden. Ich habe den Überlauf ausgeblendet, so dass das Bild unten abgeschnitten wird (wie erwartet), aber ich kann das Bild nicht dorthin bewegen, wo ich es möchte, wobei die Breite 100% und das Bild von unten bleibt

Hier ist ein jsfiddle des Codes

#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

Scheint, indem zu arbeiten:

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

Anpassen top bewegt sich das Bild nach oben und unten.

https://jsfiddle.net/y197yjp2/

Answer 2

ist das, was Sie suchen?

#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

Verwenden Sie einfach negativ eine negative margin-top

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