媒体查询和首页全屏图片答案

【问题标题】：Media Query and homepage fullscreen image媒体查询和首页全屏图片
【发布时间】：2013-04-28 18:26:27
【问题描述】：

我有这个网站：

www.daviquigley.co.uk

我已经构建并且在台式机上运行良好，并且似乎可以跨浏览器运行。我还没有包括智能手机显示的媒体查询，因为我还没有研究这些。 iphone似乎可以调整所有页面（主页除外）的大小。然而，一些人评论说，在 iphone 上，“钢琴经典”缩略图覆盖了主照片上的脸部，因为这张全屏图像没有正确调整大小。谁能帮我快速解决这个问题？我不确定媒体查询是否能解决这个问题？

谢谢安东尼

【问题讨论】：

我忘了说，当 iPhone 竖放时，情况会更糟——横放时还不错。安东尼

标签： jquery fullscreen media-queries smartphone

【解决方案1】：

在 iphone 上，“钢琴经典”缩略图覆盖了主图

这也发生在我的桌面上。 “钢琴经典”形象没有理想的定位背景。您真的希望它出现在屏幕上的哪个位置？

【讨论】：

我想我有点喜欢它现在占据的位置 - 即：它随着主图片的大小调整到它始终位于肩膀的右侧并且大约在同一水平线上。这可能吗？
刚刚意识到整个事情在 Opera 中看起来很可怕，但这是一个单独的问题：-\
Ralph - 我截取了一些屏幕截图，说明它在桌面上的当前外观（Mac OSX imac 上的 Safari 和 Firefox）。这些是我在布局方面的理想定位。 www.davidquigley.co.uk/shot1.jpg 和 www.davidquigley.co.uk/shot2.jpg
它只会在短而宽的视口上位于右肩上。我在 Chrome 中打开它（我在高屏幕上设置为相当窄），并在纵向视图中获得与 iphone 相同的效果。在这种情况下，重新考虑 background-size: cover 选项可能会更好，因为使用该选项将使您几乎无法控制与背景图像相关的元素定位。
好的。我会更好地将图像放在它自己的 div 中并添加一些媒体查询 - 也许根据需要调用不同的大小？我只是在这里把事情拉出来——我不知道如何真正实现它。