内容框，填充和窗口大小调整

Question

JS Fiddle

我有一个形象，我需要从它的大小排除填充。

我用：

box-sizing: content-box; 

的问题是，当我调整浏览器，我期望图像尺寸的缩小。使用上述内容框，浏览器按预期调整大小时，图像不会缩小。调整大小只发生在浏览器拖过所有填充之后。这意味着图像的一半熄灭。

有没有一种方法来使用内容框，填充，并仍然有图像调整大小时，浏览器调整大小。

Answer 1

使用计算表达式设置宽度的正确值

img{ 
 
    box-sizing: content-box; 
 
    max-width: 300px; 
 
    padding: 0 100px; 
 
    background: green; 
 
    display: block; 
 
    margin: 0px auto; 
 
    width: calc(100% - 200px); 
 
}

<img src="http://digital-photography-school.com/wp-content/uploads/flickr/2746960560_8711acfc60_o.jpg">

Answer 2

我不知道，如果你想这样的：

https://jsfiddle.net/g47u1hop/

img{ 
    box-sizing: border-box; 
    max-width: 300px; 
    padding: 0 100px; 
    background: green; 
    display: block; 
    margin: 0 auto; 
    width: 100%; 
} 

您可以使用盒大小：边界盒

或者您可以使用媒体查询来控制你的图像大小