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

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/Whosebug-4-xxl.png' />
</div>
<div class='result1'></div>
<div class='test2'>
  <img src='http://www.iconsdb.com/icons/preview/orange/Whosebug-4-xxl.png' />
</div>
<div class='result2'></div>

Answer 1

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

Answer 2

希望我理解你的问题。您需要先删除添加到图像的边距。比给你的 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/Whosebug-4-xxl.png' />
</div>
<div class='result1'></div>
<div class='test2'>
  <img src='http://www.iconsdb.com/icons/preview/orange/Whosebug-4-xxl.png' />
</div>
<div class='result2'></div>

如果有效请告诉我

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

image with border inside fixed width container

css

containers

image

margin

padding