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

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