使用任意div宽度进行缩放时,保持div + image方面吗?

时间:2015-06-06 13:29:51

标签: html image width scaling relative

这里有新的手工编码......有建立网站的经验,但总是使用所见即所得的编辑,只能手工调整。

无论如何......决定尝试使用Brackets重建我的投资组合。我的目标是使网格具有统一高度的行,但是具有任意宽度的列(div?)。

我需要根据宽度进行缩放,但要保持它们的相对高度,直到浏览器宽度变小(然后叠加)。

我一直在尝试,但是当我有一行工作时(我不想完全破坏我的代码),我还没回到我离开的地方,但是指定了div的宽度,而第二行没有工作(如上所述,恢复到与第一行相同的规则):

Link...

说实话,我在这里搜索了一下,但是我并没有完全理解我读过的东西,这些东西常常涉及到我想要做的不同方面,我认为......但是不完全是。 :)但我正在努力学习。

希望这比我读过的一些更“复杂”的东西更简单,但是如果可能的话,我希望对每个div使用相同的规则并使其宽度由图像的宽度控制在里面,因为我想用任意宽度创建每个图像,但是高100像素。

任何帮助表示赞赏!

1 个答案:

答案 0 :(得分:0)

要修正div的高度,只需使用height: 100px;

要缩放图像,请考虑将它们用作背景图像而不是<img>,然后应用background-size: cover;。如果你绝对需要,你也可以使用<img>但是相应的CSS会更复杂。

为了在视口变小时堆叠它们,您可以使用媒体查询。