将移动设备上的图像宽度设置为窗口大小

Question

这是确保图像正确占据移动设备宽度的唯一方法，这是：

if ($(window).width() < $("#entry img").width()) 
{
    $("#entry img").width($(window).width());
}

在 css 中没有更好的方法吗？

Answer 1

您可以使用媒体查询在 CSS 中检查设备宽度，然后在查询移动宽度时将您的图像宽度覆盖为 100%：

MDN 有关于如何解决此问题的详尽文档：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

<style>
@media (max-width: 600px) {
  .img {
    width: 100%;
  }
}
</style>

这意味着屏幕宽度小于 600 像素的设备将在查询中提供 CSS...这可能会覆盖您的默认图像样式。您可以根据自己的选择调整查询宽度，并在 CSS 中堆叠其他查询块，为平板电脑分辨率等设置独特的样式。