网格状,多个响应图像 [英] Grid-like, Multiple Responsive Images

查看:194
本文介绍了网格状,多个响应图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在组建一个展示网站,其中在主要内容区域,需要有一些图像/项目,在一个类似盒子的顺序排列在彼此的顶部。

I'm currently putting together a showcase website, where in the main content area there needs to be a number of images/items, layed out in a box-like-sequence next to and on top of each other...

http://jsfiddle.net/bdv3t/

我如何做,使得当浏览器窗口被带入并变小时,每个这些图像/项目逐渐缩小并适合比例(在大屏幕上大约有8个图像/项目从左到右,这将与在较小的屏幕上相同,只是每个图像的尺寸都较小)?

How would I go about making it so that when the browser window is brought in and made smaller, that each of these images/items gradually scales down and fits proportionality to the container that it is in (so on a large screen there are roughly 8 images/items left to right, which would be the same as on a smaller screen, only the dimensions of each of the images are smaller)?

我已经看过使用响应式图片,例如,但没有运气,因为它只使一个图像全宽。如果可以,我想避免使用表,喜欢CSS-HTML方法超过一个JS,但如果所有其他失败,JS方法应该足够了。

I've had a look into using responsive images such as this and this but with no luck, as it makes only the one image full-width. If I can, I'd like to avoid using tables and prefer a CSS-HTML method over a JS, but if all else fails, a JS method should suffice.

推荐答案

显然,这可以重做,但是一些...

Obviously this can be reworked, but something along the lines of...

http://jsfiddle.net/LAWNQ/

这篇关于网格状,多个响应图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆