Question

我发现了很多关于图像相对位置的问题，但是它们都依赖于我的情况下会失败的父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，但这没有用。我无法将其达到所需的大小，因此我可以调整大小并定位两个图像。我尝试用正确的宽度和组合高度创建它。然而，它不会使用max-width和max-height适当调整大小（变得不成比例）。

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

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

Answer 1

这是我第一次来这里。所以非常感谢知道答案是否符合您的预期。如果不是你想要的方式，请告诉我。感谢。

 <!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%);
}

Answer 2

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

Answer 3

如果不使用父div进行居中，我认为不可能做到这一点。然而，可以通过flex和“normal”css的组合来实现该效果。 Here's a working example

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

现在，只要图像的最大宽度设置为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>

相对于先前图像定位图像，该图像是动态调整大小和定位的

3 个答案: