HTML / CSS图片未包装

Question

I'm trying to build a website and when I try make a wrapper for an image, nothing happens. The aim is to make a section with an image I can use as a background and the wrapper hold the content in order (centered etc).

CSS

.image-wrapper {
    width:150px;
    margin:0 auto;
}

HTML

<section>
    <img src="img/animebreeze.jpg" alt="animeb-image">
    <div class="image-wrapper">
    </img>
    </div>
</section>

Answer 1

You have mistake in your HTML </img>

<section>
    <img src="img/animebreeze.jpg" alt="animeb-image">
        <div class="image-wrapper">
    </img>
</div> </section>

Should be

<section>
    <div class="image-wrapper">
        <img src="img/animebreeze.jpg" alt="animeb-image">
    </div>
</section>

Fiddle

Answer 2

Place the img tag inside the image-wrapper .

There is no closing tag for <img> tag.

CSS

.image-wrapper { margin: 0 auto; }  

HTML

<section>
      <div class="image-wrapper"><img src="img/animebreeze.jpg" alt="animeb-image"></div>
    </section>

You can try this way as well:

CSS

.image-wrapper { background: url(img/animebreeze.jpg)no-repeat center center; }

Using a background-image in your CSS, you don't use the <img> tag now.