更改页面大小时删除图像

Question

我有一个关于html和css的问题（PURE html和css - 没有JavaScript或JQuery）

我的页面上有2列（第一个 - 宽度：35％（页面），第二个 - 宽度：65％（页面））。第一列中有一个图像 - 300px x 300px。而且，我正在改变我的页面大小：

• 当第一列宽于300px时 - 图像应为300px x 300px
• 当第一列宽度大于100px且窄于300px时 - 图像应为100px x 100px - 当第一列较窄然后100px时 - 图像应该消失。

使用JavaScript非常简单，但我只能在HTML + CSS中进行。

有人知道怎么做吗？

谢谢！

Answer 1

你可以使用CSS3媒体查询来做到这一点，但是这当然不是所有浏览器都支持的（这只是给定的）：

示例： 如果查看区域小于600px，则将应用以下CSS。

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

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