Question

我目前有一个模式，我想用它作为网页上的叠加。

HTML：

<div id="myModal" class="modal">
   <span class="close cursor" onclick="closeModal()">&times;</span>         
      <div class="imgCon">
        <img class="overlayimg" src="img/trendoverlay.png" />
        <img class="overlayimg" src="img/trendtimeline.png" style="display: block"/>
      </div>          
    </div>

CSS：

*{
  box-sizing: border-box;
}

body{
  width:100%;
}

.imgCon{
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 0 51.5px 73px;
  text-align: center;
}

.overlayimg{
  max-width:100%;
  max-height: 100%;
  height:auto;
}

然而，这是问题所在。仅图像时的第一个图像（顶部一个）。这是完美的。它工作正常。

下面的图像必须与另一个图像保持在同一个DIV内，与上图像一样宽。但身高是固定的。有没有办法实现这一点，所以他们仍然可以使用左/右51.5px和底部73px的填充进行缩放？

图片更多信息： Example

小提琴： https://jsfiddle.net/4n1quv9n/1/#&togetherjs=sT7KVDhPT8

正如您所见，顶部图像可以缩放我希望它缩放的方式。它保持了它的纵横比，但最小的左/右和底部。假设下面的图像具有与顶部图像相同的宽度。但高度必须固定在110px。但是包含图像的Div必须在两侧和底部保持最小2的填充。

这是错误的： https://imgur.com/a/ILPpO

此处底部图像也必须与顶部图像一样宽。实际上它们也需要粘在一起，所以它看起来像1个图像而不是2个单独的图像。

Answer 1

试试这个

<强> CSS

body{
  position: relative;
}
.wrapper{
  position: relative;
}
div.image-container{
  position: absolute;
  margin:auto;
  height: 100%;
  max-width: 100%;
  padding: 0 51.5px 73px;
  text-align: center;
}

img{
  max-width:100%;
}

<强> HTML

<body>
<div class="wrapper">
  <div class="image-container">
      <img src="http://imgur.com/c7uASdV.png">
      <img src="http://imgur.com/60d6BUt.png" style="height: 110px">
  </div>
  </div>
 </body>

Link for reference

Answer 2

您可以尝试display:table属性在中间绘制一个单元格来保持并调整第一张图像的大小，并absolute定位第二张图像：

＆＃13;

#modal {
  display: table;
  height: 100vh;
  width: 100vw;
  padding-bottom: 73px;/* bottom limits */
  box-sizing: border-box;
}

#modal:before,
#modal:after {
  content: '';
  padding-left: 51px;/* sides limits ... pixel cannot be cut in hlves */
  display: table-cell;
}

.modchild {
  display: table-cell;
  position: relative;
  margin-bottom: 100px;/* room for img 2 */
  width: 1%; /* will expand to fit image width and will stand at middle */ 
}

img[src*="x212"] {
  height: 100vh;/* size it */
  max-height: calc(100vh - 100px - 73px);/* downsize to use */
  display: block;/* or reset vertical-align*/
}

img[src*="x100"] {/* size and stretch it */
  margin: 0;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100px;
  bottom: 0;
}
* {margin:0;}

＆＃13;

<div id=modal>
  <div class=modchild>
    <img src="http://dummyimage.com/400x212&text=keep_ration" />
    <img src="http://dummyimage.com/400x100/ff0&text=distort" />
  </div>
</div>

＆＃13;

小提琴示例：https://jsfiddle.net/4n1quv9n/4/

css缩放顶部图像水平和垂直但底部图像仅宽度

2 个答案: