简体繁体 English

响应图像网格上的动态高度？

[英]Dynamic Height on Responsive Image Grid?

原文 2014-02-17 20:09:12 8 2 html/ css/ image/ responsive-design/ image-gallery

I have a "grid" of images with products, and I want these to be responsive. 我的产品带有“网格”图像，我希望这些图像能够快速响应。 As you can see, on the "mobile view" the images fit on fine and look okay, but on desktop, when they're bigger horizontally, the height gets cropped too much so a lot of the image is missing. 如您所见，在“移动视图”中，图像可以很好地显示并且看起来还不错，但是在桌面上，当它们在水平方向上变大时，高度会被裁剪得太多，因此很多图像都将丢失。

Here's how the site looks at mobile size: 以下是该网站查看移动设备尺寸的方式：

流动检视

And desktop size: 和台式机尺寸：

桌面检视

Is there a way for me to have the height grow as well, while still keeping them "flush" and in a grid? 我有办法让高度也增加，同时又使它们保持“齐平”并处于网格状吗？ No idea why I'm finding this so tricky! 不知道为什么我觉得这很棘手！

The site is: here 该站点是：这里

2 个解决方案

The simpler (and maybe only) thing to do then, is to keep using the fixed height but with media queries. 然后，最简单（也许唯一）的方法是继续使用固定高度，但要使用媒体查询。 This means that you change the height of the link based on which screen width you are. 这意味着您可以根据自己的屏幕宽度来更改链接的高度。 This makes sense because you will always have 1, 2, 3 or 4 columns so it is quite easy to make a rough estimations of the heights you want for each case. 这是有道理的，因为您将始终具有1、2、3或4列，因此很容易对每种情况进行所需高度的粗略估计。

I've just resized all the images manually in Photoshop to get this working for now so the site will no longer show the problem. 我刚刚在Photoshop中手动调整了所有图像的大小，以使其暂时正常工作，因此该站点将不再显示此问题。

Will just have to run with this! 只需运行此！