屏幕分辨率低于600后隐藏图片答案

【问题标题】：Hide image after screen resolution is below 600屏幕分辨率低于600后隐藏图片
【发布时间】：2022-02-03 20:33:34
【问题描述】：

这是我的网站：http://highcatering.wpengine.com/ 那里有一张婚车图像。我想在屏幕尺寸低于 600 像素时隐藏它。为什么？尝试将浏览器的宽度减小到足够的程度（或在手机上查看），您会看到文本移动到汽车下方，没有左边距，汽车和文本之间也没有边距。

我希望汽车消失。

有什么想法吗？

谢谢！！！

【问题讨论】：

如您所见，这是一个 wordpress 主题。
我建议你调查CSS media queries。它们允许您根据屏幕大小有条件地应用 CSS 定义。
Removing HTML element on mobile view?的可能重复
谢谢！！！我是新手，所以 CSS 高级问题仍然很难理解。

标签： css image hide screen-resolution

【解决方案1】：

把它放在你的 style.css 中

@media screen and (max-width: 600px) { 

.post .sc_image img { display: none; }  

}

【讨论】：

它必须是最大宽度而不是最小宽度，刚刚注意到，抱歉...已编辑
谢谢！！我添加了这个：`@media screen and (max-width: 500px) { .post .sc_image img { display: none; } } ` 新问题出现： 1. 文本没有左边距。 2. 不想消失的图像，走开。例如，汽车上方的视差消失了。
尝试在最后一个}之前添加这个。它是使文本居中... element.style { margin: auto;文本对齐：居中； }
我要睡觉了。我明天看看。晚安！
如果您看到我的网站，它就可以工作。但是，该声明还隐藏了我不想隐藏的图像，例如汽车上方的视差。我不想要那个。我怎样才能使陈述更具选择性？

【解决方案2】：

这是一个有趣的问题，到 2022 年仍然很重要。使用媒体查询和display:none;（根据另一个答案）很容易隐藏图像：

@media(max-width: 600px) { 
  .post .sc_image img { 
    display: none; 
  }
}

但是图像仍然在后台加载 - 这绝对不是页面速度和核心网络生命力的理想选择。

你可以使用loading="lazy"结合上面的解决方案来保证图片不显示也不会加载：

<img loading="lazy" src="cool-car.webp" class="sc_image" width="200" height="125" alt="This is a photo of my cool car" />

但是，如果此图片恰好位于桌面页面顶部附近 - “首屏”，会发生什么情况？添加延迟加载could cause a performance hit.

您可以将图像作为背景图像添加到 CSS 中，但这有其自身的问题 - 即 you can't (at the moment) support newer image file formats with a fallback yet using background-image: image-set()。

我遇到了这个问题，并想出了这个解决方案 - 使用老式透明 1x1 像素作为小屏幕的后备方案：

<picture class="sc_image">
    <source srcset="pixel.png" media="(max-width: 600px)">
    <source srcset="cool-car.webp" type="image/webp">
    <source srcset="cool-car.png" type="image/png">
    <img src="cool-car.png" width="200" height="125" alt="This is a photo of my cool car">
</picture>

我不确定这是否是最好的方法，但我认为是。暂时。

【讨论】：