位置图像相对于以前的图像，这是动态的大小和位置

我已经找到了关于图像的相对定位的许多问题，但他们都依靠父母的DIV失败在我的情况，你会看到。位置图像相对于以前的图像，这是动态的大小和位置

我还发现了固定比例DIV的各种解决方案，那些使用填充底部导致超大高度的情况。

所以这里是我原来的情况（例如见https://www.giulietta-del-conte.com/）。本质：

<body> 
<img alt="Logo" width=1280 height=853 src="/img/GdC-Logo.jpg"> 
</body>

有了：

img { 
    height:auto; 
    width:auto; 
    max-width:80%; 
    max-height:80%; 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
}

现在我要位置的第二图像（横幅）正是第一个图像的下方。横幅宽度相同，高度更小。

我已经尝试创建一个父div，但那并不奏效。我无法达到所需的大小，所以我可以调整大小并放置两个图像。我试图用正确的宽度和组合高度来创建它。然而，它不会使用最大宽度和最大高度（变得不成比例）正确调整大小。

创建允许在任一方向调整大小的版本相当容易，但是我无法获得允许在两个方向调整大小并以组合块为中心的版本。

有什么想法？我不想创建组合图像作为地图。

来源

2016-08-20 B_pi_P

旁注：你在你的HTML错误的''。 – Utkanos

只是复制/粘贴错误。这是在原始页面上，但在这里没有任何改变。以上将更正。 –

在两幅图像（img +横幅）的情况下，你希望它们都是水平和垂直居中（好像它们都是单幅图像），还是希望img居中然后横幅位于其下方？ –

OK，这里是一个黑客。我改变了横幅有两个图片的联合大小。然后我可以正确调整大小并将其居中。它仍然需要正确定位主要（原始）图片。完成。解决方案可在https://www.giulietta-del-conte.com/上看到。

来源

2016-08-20 16:04:36

这是我第一次来这里。因此，非常感谢您知道答案是否符合您的预期。也让我知道，如果它不是你想要的方式。谢谢。

<!DOCTYPE html> 
    <html> 
     <head> 
     <link rel="stylesheet" href="new 1.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     </head> 
     <body> 
      <div> 
      <img id= "pic" alt="Logo" width="1280" height="853" src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg"> 
      <img id="banner" src="https://www.giulietta-del-conte.com/img/Scope.jpg" alt="banner" width="1280" height="200px"> 
      </div> 
     </body> 
    </html>

CSS：

#pic { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 
#banner { 
    display: block; 
    width: 100%; 
    height: 10%; 
} 
div { 
    height:911px; 
    width:1280px; 
    max-width:80%; 
    max-height:80%; 
    position:absolute; 
    top:46%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
}

来源

2016-08-20 12:46:46 Sazz

感谢您的回复。我以前曾经尝试过BR，但是它与我的动态（双向居中）定位失败。横幅然后获得相对于中点的位置。 –

你能向我解释一下你想在横幅和图片之间做些什么吗？即使您使浏览器变小，图像之间的空间也会保持不变。 – Sazz

我实际上希望两个图像都相互接触，两个图像的宽度相同（动态），使它们看起来像一个。但正如上面解释的，我不想创建一个组合图像。上面的测试页面显示了如果浏览器窗口是典型的桌面/笔记本电脑大小所需的效果，但是当您使窗口比例很高或非常宽时失败。 –

我不认为这是可能做到没有使用父母divs居中。但是，可以通过flex和“normal”css的组合来实现该效果。 Here's a working example。

您需要一个水平居中的柔性容器（本例中为.centered），它占据了浏览器高度的100％。在柔性容器中嵌套，添加非柔性div（例如display: block）。由于非柔性div是柔性布局的唯一项目，因此它将水平和垂直居中，同时允许您在其中创建单独的非柔性布局。

现在，只要图像的最大宽度设置为100％（未指定高度），它们的比例将保留，无论其父元素的宽度是多少。当然，我没有做任何事情来限制垂直溢出，但只要图像比例不疯狂，这可能值得一试。

/* For demo purposes */ 
 
* { margin: 0; padding: 0; } 
 

 
.centered { 
 
    display: flex; 
 
    height: 100vh;   /* Needed for vertical centering */ 
 
    align-items: center;  /* Flex - vertical centering */ 
 
    margin: 0 auto;   /* Horizontally center the layout */ 
 
    justify-content: center; /* Flex - horizontal centering of content */ 
 
    text-align: center;  /* Keep images centered in the event of layout width exceeding image width */ 
 
    max-width: 60%;   /* For demo purposes */ 
 
    background: #eee;   /* For demo purposes */ 
 
} 
 

 
/* Nested non flex container allows you to create a separate layout inside the flex container */ 
 
.centered div { 
 
    display: block; 
 
    padding: 10px; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    margin: 5px 0; 
 
}

<div class="centered"> 
 
    <div> 
 
     <img src="http://placehold.it/1000x500"> 
 
     <img src="http://placehold.it/1000x200"> 
 
    </div> 
 
</div>

来源

2016-08-20 19:38:08 antidecaf

感谢您的想法。我只是不知道如何确保图像的组合高度仅限于视口的80％。 –

位置图像相对于以前的图像，这是动态的大小和位置

回答

相关问题