Question

我有一张图片，我需要从它的大小中排除填充。

我用：

    box-sizing: content-box;

问题是，当我调整浏览器大小时，我希望图像缩小。使用上面的内容框，当浏览器按预期调整大小时，图像不会缩小。只有在浏览器拖过所有填充后才会调整大小。这意味着图像的一半会从屏幕上消失。

有没有办法使用内容框，填充，并且在浏览器调整大小时仍然可以调整图像大小。

Answer 1

使用calc表达式

将宽度设置为正确的值

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%;
}

您可以使用box-sizing：border-box

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

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

2 个答案: