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

回答