HTML/CSS图像不包装

我想建立一个网站，当我尝试做一个图像的包装，没有任何反应。我们的目标是创建一个带有可用作背景的图像的部分，并且包装按顺序保存内容（居中等）。HTML/CSS图像不包装

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>

2015-09-05 Hokage

你有错在你的HTML </img>

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

应该

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

2015-09-05 03:25:54 Shehary

您好，感谢您的图像现在的工作，但遗憾的是它没有中心。基本上我不想水平滚动，并希望图像的高度较小，并在宽度上填充整个屏幕（如横幅）。我试过边缘/高度和宽度，但没有任何反应？对不起，我是新的，只是卡在这里：/ – Hokage

给我一点时间 – Shehary

在小提琴做了一些改变，尝试跟随你的设计中的变化，看看它的工作原理，如果你有一个活的网站链接，过去这里有更近的看，这里是变化的小提琴http://jsfiddle.net/n4mxyb3e/2/ – Shehary

放置image-wrapper内img标签。

<img>标签没有结束标签。

CSS

.image-wrapper { margin: 0 auto; }

HTML

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

你可以试试这个方法，以及：

CSS

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

在您的CSS中使用background-image，您现在不使用<img>标记。

2015-09-05 03:24:54 zer00ne

回答