html - 更改页面大小时删除图像

我有一个关于html和css的问题（纯html和css-没有JavaScript或JQuery）
我的页面有两列（第一列宽度：35%（第页），第二列宽度：65%（第页））。第一列有一个图像-300px x 300px。而且，我正在改变页面的大小：
当第一列宽度大于300px时，图像应为300px x 300px
当第一列大于100px且小于300px时，图像应为100px x 100px
-当第一列比100px窄时，图像应该消失。
使用JavaScript很容易，但我只能用HTML+CSS来实现。
有人知道怎么做吗？
谢谢！

最佳答案

您可以使用CSS3媒体查询来实现这一点，但是这当然不是所有浏览器都支持（这只是一个给定的）：
例子：
如果查看区域小于600像素，将应用以下CSS。

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

参考：
http://webdesignerwall.com/tutorials/css3-media-queries

关于html - 更改页面大小时删除图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10333405/