Html 更改页面大小时删除图像

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

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

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

使用JavaScript非常容易，但我只能在HTML+CSS中使用

有人知道怎么做吗

---

谢谢

您可以使用CSS3媒体查询来实现这一点，但并非所有浏览器都支持这一点（这只是一个给定的问题）：

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

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

参考资料：

---

您可以使用CSS3媒体查询来实现这一点，但并非所有浏览器都支持这一点（这只是一个给定的问题）：

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

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

参考资料：

---

你不能给图像加上%的宽度和高度吗？你不能给图像加上%的宽度和高度吗？我同意使用媒体查询的建议。此外，如果在基线处使用为小显示（即最大宽度：320px）设置的样式表，则可以设置类似于img{display:none；}的内容，然后通过设置img{display:block}在级联中稍后覆盖最小宽度：640px（或任何宽度）的值。请注意，旧版本的IE将读取所有css并忽略媒体查询，因此控制级联非常重要我同意使用媒体查询的建议。此外，如果在基线处使用为小显示（即最大宽度：320px）设置的样式表，则可以设置类似于img{display:none；}的内容，然后通过设置img{display:block}在级联中稍后覆盖最小宽度：640px（或任何宽度）的值。请注意，旧版本的IE将读取所有css并忽略媒体查询，因此控制级联非常重要