我已经看到这个在SO上发布了类似的问题，所以请原谅我，如果我的问题听起来有点多余。 我相信不是。
我的图像网格大小不均匀。 我正在尝试使用CSS来响应缩小图像网格，因此当在不同的屏幕尺寸（主要用于Android平板电脑）上查看时，图像都会均匀地缩小并且不会叠加在彼此之上。 我尝试在应用于标签的类上应用max-width：100％，但它只适用于真正的大图像，但它不适用于较小的图像，它只是堆叠它们。 这是URL： http ： //www.thebeachschool.eq.edu.au/freshwater-app/ （转到贡献者选项卡）。 以下是我的CSS：
div#contributor-row-1, div#contributor-row-2, div#contributor-row-3 {max-width: 100%; margin-bottom: 20px; text-align: center; } div#contributor-row-4 {max-width: 100%; text-align: center;} div#contributor-row-1 img {padding-right:20px; max-width: 100%; } div#contributor-row-2 img {padding-right:25px; max-width: 100%;} div#contributor-row-3 img {padding-right:17px; max-width: 100%;} div#contributor-row-4 img {padding-right:8px; max-width: 100%;}完整的HTML有点乱，但只是把它看起来像这样：
<div id="contributor-row-1"> <img><img><img><img> </div> <div id="contributor-row-2"> <img><img><img><img> </div> <div id="contributor-row-3"> <img><img><img><img> </div> <div id="contributor-row-4"> <img><img><img><img> </div>由于图像尺寸不统一，它使我的生活变得艰难，我不认为我能够实现我想要的。 我尝试在网格状，多响应图像中使用此解决方案，但它处理的是均匀的图像网格，这些图像的大小相同。
我的问题是，可以有一个CSS解决方案，而不使用媒体查询所有可能的像素分辨率的断点？ 如果我使用的所有图像大小相同，我会很高兴，但它们是组织的徽标，它们都是不同的维度。
I have seen this posted as a similar question here on SO, so please forgive me if my problem sounds a bit redundant. I believe it is not.
I have a grid of images that ARE NOT UNIFORM in size. I am trying to responsively scale down the grid of images using CSS so when viewing on different screen sizes (mainly for Android tablets) the images all shrink down uniformly and do not stack on top of each other. I attempted applying the max-width:100% on a class applied to the tags but it only works with the real big images but the smaller ones it does not, it just stacks them. Here is the URL: http://www.thebeachschool.eq.edu.au/freshwater-app/ (go to the contributors tab). Below is my CSS:
div#contributor-row-1, div#contributor-row-2, div#contributor-row-3 {max-width: 100%; margin-bottom: 20px; text-align: center; } div#contributor-row-4 {max-width: 100%; text-align: center;} div#contributor-row-1 img {padding-right:20px; max-width: 100%; } div#contributor-row-2 img {padding-right:25px; max-width: 100%;} div#contributor-row-3 img {padding-right:17px; max-width: 100%;} div#contributor-row-4 img {padding-right:8px; max-width: 100%;}The full HTML is a bit messy but simply put it looks like this:
<div id="contributor-row-1"> <img><img><img><img> </div> <div id="contributor-row-2"> <img><img><img><img> </div> <div id="contributor-row-3"> <img><img><img><img> </div> <div id="contributor-row-4"> <img><img><img><img> </div>As the images are not uniform in size, its making life hard for me and I don't think I will be able to achieve what I want. I tried using the solution here at Grid-like, Multiple Responsive Images but it deals with a uniform grid of images that are all the same size.
My question is, can there be a CSS solution without using media queries for all the possible breakpoints of pixel resolutions? I'd love if all the images I was working with were the same size, but they are logos of organisations and they are all different dimensions.
最满意答案
将max-width: 100%为图像和width: 100%到父锚点：
div#contributor-row-1 a { width: 100%; } div#contributor-row-1 img { padding-right: 20px; max-width: 100%; }编辑：检查这个jsfiddle ，希望有所帮助
Set max-width: 100% to images and width: 100% to the parent anchors:
div#contributor-row-1 a { width: 100%; } div#contributor-row-1 img { padding-right: 20px; max-width: 100%; }Edit: Check this jsfiddle, hope helps
更多推荐
发布评论