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

Question

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

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

• 当第一列宽于 300 像素时 - 图像应为 300 像素 x 300 像素
• 当第一列宽于 100 像素且小于 300 像素时 - 图像应为 100 像素 x 100 像素 - 当第一列窄于 100 像素时 - 图像应消失。

使用 JavaScript 很容易，但我只能在 HTML + CSS 中使用。

有人知道该怎么做吗？

谢谢！

Answer 1

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

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

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

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