带有边框的固定宽度容器内的图像

Question

我有一个固定宽度的容器（div）和里面的图像，这个图像应该适合容器宽度，但有一个边距，如下所示：

我尝试在容器中添加填充物，使容器更大。

我的第二次尝试是在图像上添加一个边距，但它会让它超出容器。

这两个尝试都在这个片段中：

＆＃13;

＆＃13;

$('.result1').html('div is ' + $('.test1').width() + ' and image is ' + $('.test1 img').width());
$('.result2').html('div is ' + $('.test2').width() + ' and image is ' + $('.test2 img').width());

＆＃13;

div{
  width: 300px;
  background-color: #999;
}
img{
  background-color: #FFF;
  width: 100%;
}
.test1{
  padding:10px;
}
.test2 img{
  margin:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test1'>
  <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' />
</div>
<div class='result1'></div>
<div class='test2'>
  <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' />
</div>
<div class='result2'></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我希望我理解你的问题。 您需要先删除添加到图像中的边距。 比给你的div容器填充，并添加box-sizing：border-box到它 -

＆＃13;

＆＃13;

$('.result1').html('div is ' + $('.test1').width() + ' and image is ' + $('.test1 img').width());

＆＃13;

div{
  width: 300px;
  background-color: #999;
  box-sizing: border-box;
  padding: 10px;
}
img{
  background-color: #FFF;
  width: 100%;
}
.test1{
  padding:10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test1'>
  <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' />
</div>
<div class='result1'></div>
<div class='test2'>
  <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' />
</div>
<div class='result2'></div>

＆＃13;

＆＃13;

＆＃13;

让我知道它是否有效

Answer 2

您需要将box-sizing: border-box;分配给容器，然后使用填充解决方案。这个CSS会阻止填充增加元素的大小。