如何使百分比宽度包括填充？边框似乎不起作用

Question

我想创建一个百分比宽度来包含填充。也就是说，如果我的div宽度为50%或500px，则无论填充如何，都应为250px。

这里是小提琴手：https://jsfiddle.net/sxzxbe2t/

正如你在这里看到的那样......

......小猫仍然是290px宽，而应该是250px。我使用box-sizing: border-box;无效。

有什么想法吗？

修改

我需要将图像保持在div内100％，除非它有另一种方式占据整个宽度。

Answer 1

似乎您仍需要添加供应商前缀Fiddle

.container .image-wrapper {
    width: 50%;
    padding: 0 20px; 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;    
    box-sizing: border-box;  // this makes no difference
}