Warum funktioniert der negative Rand links und rechts nicht?

Question

Ich habe ein Bild und ich legte css style margin-left:-50px und margin-right:-50px aber ist nur kollabieren, sollte es größer sein.

Gibt es eine alternative Möglichkeit, dies zu tun?

Warum funktioniert der negative Rand links und rechts nicht richtig?

Code:

<img class="myslide" src="img/text.jpg"> 

<Style> 
    .myslide { 
     margin-left:-50px; 
     margin-right:-50px; 
    } 
</style> 

Answer 1

ich Artbild Element auf diese Weise vermeiden würde - gleich wie für die Eingänge. Es ist nur ein spezifisches Element in HTML. Wrapper erstellen, dort Rand hinzufügen: 0 -50px; Breite: Auto; Und dann img angeben, um Breite: 100%;

.page { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    padding: 50px 0; 
 
    background-color: gray; 
 
} 
 
.wrapper { 
 
    margin: 0 -50px; 
 
} 
 
.wrapper img { 
 
    width: 100%; 
 
}

<div class="page"> 
 
    <div class="wrapper"> 
 
    <img src="http://www.dummyimage.com/200x100/000/fff/" /> 
 
    </div> 
 
</div>

Answer 2

Ein Bild ist ein Inline-Element. Versuchen Sie, display: block; zu Ihrem Bild. Sie können auch versuchen, es anstelle des negativen Rands zum übergeordneten Element zu positionieren.

Answer 3

CSS Syntaxfehler vergessen Sie ; Komma nach margin-left

.myslide { 
     margin-left:-50px; 
     margin-right:-50px; 
    }