Div每个屏幕的尺寸相同

在我的网站上，人们可以在电路板上张贴图像并拖动它们。Div每个屏幕的尺寸相同

目前我使用以下命令：

width:60%; 

height 40%;

他们可以保存他们的工作。

的位置保存利润率所以图像可以top:50px;和left:150px;

所以它的50像素的股利和50像素从div的自上而下的左边框的右侧。

如果他们加载他们的工作，它必须看起来完全一样。

因此，如果图像位于右下角，则它们必须在加载文件时位于右下角。

我的问题是，如果用户将其加载到不同的分辨率上，它将占用边距，并且如果屏幕分辨率在下一个屏幕上更大，则图像将不会在右下角，因为有更多空间原因50 1200％，低于1900年

50％，所以，我必须使用PX width和height，但如果我在1200像素设置600px的它看起来不错，但600px的对1900px不会好看。

有没有办法使用px，但在每个页面上看起来都不错？

因此，基本上我想使用px，但它必须看起来一样（就像我使用％时一样），所以页边距相同，页面看起来一样，大分辨率上没有大的开放空间。

Example

i上在1366制成的板并重新打开它在1024图像取余量从左侧所以它是从原板的例子

。

但董事会（黄色背景）是相同的屏幕％。

所以我想要一个电路板，即相同的屏幕百分比，但加载在每个分辨率相同的图像，所以1025屏幕右下角必须在1366屏幕的右下角。

如果我使用px只有站点看起来不同的所有决议，这就是我想要防止。

来源

2013-03-22 Sven van den Boogaart

Somde代码或示例会很有用。 – 2013-03-22 08:55:53

您的html样本将很有用，或者使用http://jsfiddle.net/提供问题示例 – Tanner 2013-03-22 08:55:53

为您的身体（或父元素）给出固定的宽度。 – 2013-03-22 08:58:20

-1

它听起来像你必须做的是自适应主题或响应式设计在CSS中。

@media screen and (max-width: 1024px){ 
    img.bg { 
    left: 50%; 
    margin-left: -512px; } 
}

对于最大宽度为1024px的屏幕，设置img元素。您可以为每个想要考虑的屏幕大小创建其中的一部分，并且您应该能够对用户看到的内容进行完全细致的控制，而不管其屏幕尺寸是多少。

来源

2013-03-22 09:01:07 TopherGopher

所以如果我用1900 px进入一个屏幕，整个页面设置看起来会不一样，那就是我想要避免的。 – 2013-03-22 09:29:27

我看到了 - 您试图将图片保留为相同尺寸，但仍然看起来不错。也许你可以尝试与pinterest相同的方法，它们将图片缩放到宽度相同，纵横比保持不变，因此列整齐排列。并允许行数量尽可能大。如果没有别的，他们的CSS将揭示他们如何按照我认为你想要的响应方式缩放图片。 – TopherGopher 2013-03-22 16:12:40

如果不是这样，我会建议使用JS来获取document.width（所有密集目的的屏幕宽度）并使用original_image.width，计算出每个图像的绝对位置。它有点笨拙，但它可能会让你看起来更好。 – TopherGopher 2013-03-22 16:19:23

Div每个屏幕的尺寸相同

回答

相关问题