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

Question

我有一个固定宽度的容器 (div) 和一个图像，这个图像应该适合容器宽度但有一个边距，如下所示:

我尝试向容器添加填充，它使容器变大。

我的第二次尝试是为图像添加边距，但它使其超出了容器范围。

两次尝试都在这个片段中:

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

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

<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>

Answer 1

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

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

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

<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>

如果有用请告诉我