调整浏览器后,为什么我的图像不能保留在原位?

时间:2016-04-08 07:15:30

标签: html image-scaling

我是编码的初学者,所以任何建议或帮助都会很棒。主背景图像使用浏览器调整大小,但其他徽标和图形元素则不会。如何在浏览器大小更改时调整其他图像的大小并保持原位?

这是一个链接:

https://f0476ead42deb6e625581792b6fc55aec2b47ff7.googledrive.com/host/0B-QoEzNnMcBDanFlYm5hTDdZUVk

1 个答案:

答案 0 :(得分:0)

在图像的定位和大小调整中使用百分比,vw,vh,vmin或vmax。 vw,与视口宽度成比例,vh与视口高度成比例,vmin按视口宽度和高度的最小值进行缩放,vmax按视口宽度和高度的最大值进行缩放。这将使它们随着视口的大小而缩放。百分比与包含块的大小成比例。例如(您的一张图片):

#secondharvest {
    position: absolute;
    left: 10vw;
    top: 10vw;
    z-index: 1;
    width: 15vw;
    height: 10vw;
}