在小浏览器窗口上水平显示图像

时间:2013-04-25 08:28:37

标签: css

我有这个我正在使用的照片网站,我对浏览器窗口的反应大小有问题。图像在100%时看起来很棒,但是当我调整窗口大小时,风景图像开始调整大小,我知道它们正在调整大小以满足浏览器窗口的宽度。

然而,当我变得很小时,为了模仿智能手机,我真的希望这些图像能够叠加,因为这对于肖像图像更有意义。因此,当浏览器很小时,我们的想法是从左到右,然后从上到下。我在css有点生疏,我不记得如何完成这件事。有人可以帮助一个粗鲁的人,并指出我正确的方向,所以我可以得到这个?我通过我的WP覆盖选项完成这一切,所以我应该遵循的方法只是css将是最好的,因为我是一个更复杂的东西。

该网站位于:http://jadanduffinphotography.com/

谢谢! -Jadan

2 个答案:

答案 0 :(得分:0)

我建议你做的是:

  • 编写css以在容器float: left;

  • 内制作图像position: relative;div
  • 检测浏览器窗口的方向

  • 根据方向,设置容器div的宽度

这应该使图像尽可能水平显示,并在没有时垂直叠加。

你也应该看看this

答案 1 :(得分:0)

这很好。不知道什么实际上困扰你的响应式布局,但到目前为止,您的网站工作得很好。

如果您仍然不希望在较小的设备上调整大小/布局,请在此文件#7201

上的行#7509 - http://jadanduffinphotography.com/wp-content/themes/heat/style.css之间删除/修改