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

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中堆叠其他查询块，以便为平板电脑分辨率设置独特的样式等。