全宽div在固定宽度的页面上 [英] full-width div on a fixed-width page

问题描述

我有一个固定宽度居中的页面，并且必须在页面中间插入一个全角图像。什么是最好的办法呢？

CSS = pre> .container {
width：500px;
margin：0 auto;
背景色：紫色;
padding：30px;
}
img {
position：absolute;
宽度：100％;
剩下：0;
}


HTML：

 < div class =container> 
< p>在这里复制。< / p> 
< img src =http://www.placecage.com/c/500/300> 
< / div> 
  

I have a fixed width centered page, and have to insert an full-width image in the middle of the page. What is the best way to do it?

解决方案

http://jsfiddle.net/c59Pw/

CSS:

.container {
    width:500px; 
    margin:0 auto;
    background-color:purple;
    padding:30px;
}
img {
    position:absolute;
    width:100%;
    left:0;
}

HTML:

<div class="container">
    <p>Copy here.</p>
    <img src="http://www.placecage.com/c/500/300">
 </div>

这篇关于全宽div在固定宽度的页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！