带有响应式设计的水平三幅图像

发布于 2024-12-12 00:07:03 字数 738 浏览 0 评论 0原文

我需要有关如何创建具有流体调整大小的简单图像网格的说明。我想在我的首页上放置三个（约 300 像素）方形图像，这些图像跨越宽度并在调整窗口大小或查看时做出响应。如果屏幕尺寸较小，三个图像将保持水平，但会缩小。在手机上查看时，这三个图像将叠加在一起，第一个位于顶部，中间第二个，最后一个三分之一。

我可以显示图像，但我在使用 CSS 时遇到了问题。

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

对此 NOOB 的任何建议表示赞赏。 :-)

原文

I need instruction on how to create a simple image grid with fluid resizing. I would like to place three (about 300px) square images on my front page that span the width and respond when the window is resized or if viewed on. If screen size is smaller, the three images will stay horizontal, but shrink. When viewed on a phone, the three images will stack with the first being at the top, the middle one second and the last one third.

I can get the images to show up, but I'm having trouble with CSS.

<div id="content" class="col-full">

 <div id="grid">

    <a href="http://mywebsite.com/info/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/about/"><img src="http://lorempixel.com/320/320"></a>
    <a href="http://mywebsite.com/contact/"><img src="http://lorempixel.com/320/320"></a>

    </div>

<style type="text/css">
#grid img {
float: center;
margin: 25px;
}
</style>

Any advice is appreciated for this NOOB. :-)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忘年祭陌 2024-12-19 00:07:03

尝试“文本对齐：居中；”在容器上和“显示：内联块；”在图像上。

一定要把事情做好。

示例： http://jsfiddle.net/SvR6Z/1/

编辑：添加了缩小屏幕的方法。

要根据窗口宽度更改图像在页面上的位置，您可以执行以下操作：

指定具有相对大小的标签。例如“宽度：80%；”页面宽度将始终是父容器的 80%（如果父容器是 body，则它将是窗口宽度的 80%）。默认情况下块级元素的宽度为100%；如果您不希望它超过某个值，您可以指定 max-width 属性来执行此操作。元素：“宽度：100%；最大宽度：906px；”无论窗口大小如何，宽度始终为 960px 或更小。
如果您想对移动查看器的网格和装饰有更多控制（例如，一些元素）oyu 可以使用 css 媒体查询（在此处阅读有关它们的更多信息：http://css-tricks.com/6731-css-media-queries/ ）来执行此操作。例如，如果您以这种方式将 css 链接到页面，则仅当窗口宽度大于 701px 且小于 900px 时，它才会起作用：

Try "text-align: center;" on container and "display: inline-block;" on images.

Must do the thing.

Example: http://jsfiddle.net/SvR6Z/1/

EDIT: Added ways to shrink screen.

To change images position on the page it response to window width you can do following:

Specify tags with relative sizes. For example with "width: 80%;" page width will always be 80% of the parent container (if the parent container is body, then it will be 80% of windows width). By default block-level element have width 100%; If you don't want it to be more than some value you can specify max-width property to do so. Element with: "width: 100%; max-width: 906px;" will always have width of 960px or less, no matter of window size.
If you want to have more control to the grid and decoration for mobile viewers (hede some elements for example) oyu can use css media queries ( read more about them here: http://css-tricks.com/6731-css-media-queries/ ) to do so. For example if you link css to page this way it will be working only when window width is more than 701px and less then 900px:
```
<link rel='stylesheet' media='screen
      and (min-width: 701px) 
      and (max-width: 900px)' href='css/medium.css' />
```

回复收藏 0 原文

~没有更多了~