html，宽度 100% 和填充

Question

我对边距有疑问。我想在 div 元素中放置图像。高度应为图像的高度，但宽度应为父 div 减去填充。

 <div class="inner">
      <img width="100%" src="http://pawelek-moj-aniolek.blog.onet.pl/wp-content/blogs.dir/505303/files/blog_bg_734362_1406866_tr_morze.jpg" alt="There is no image"/>
 </div> 

和样式

  .inner {
        width: 100%;
        height: 100%;
        margin: 10px;
        position: relative;
   }

 .inner img {
       width: 100%;
  } 

问题很容易在图像上看到。

http://i59.tinypic.com/zn6mc2.png我想在图像的每一侧周围有 10 个像素的白色区域

Answer 1

从 inner 类中删除 width:100%。像下面这样更新您的 CSS。

  .inner {
    height: 100%;
    margin: 10px;
    position: relative;
   }

DEMO