Fatal编程技术网
  • html/
  • Html css缩放顶部图像水平和垂直，但仅缩放底部图像宽度

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

html css

Html css缩放顶部图像水平和垂直，但仅缩放底部图像宽度,html,css,Html,Css,我目前有一个模式，我想用它覆盖在网页上 HTML: <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">&times;</span> <div class="imgCon"> <img class="overlayimg" src="img/trendoverlay.pn

我目前有一个模式，我想用它覆盖在网页上

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>
然而，问题出在这里。第一个图像只有一个图像。太完美了。它很好用

下面的图像必须与另一个图像保持在同一个DIV内，与上面的图像一样宽。但高度是固定的。有没有办法做到这一点，使他们仍然规模与51.5px左/右和73 px在底部填充

图片和更多信息：

小提琴：

正如您所看到的，顶部的图像按我希望的比例缩放。它保持了它的纵横比，但有一个最小的左/右和底部。假设一个下面的图像与上面的图像具有相同的宽度。但高度必须固定在110像素。但是包含图像的Div必须在侧面和底部保持这两个最小的填充

这是错误的：

在这里，底部图像的缩放范围必须与顶部图像一样宽。实际上，它们还需要粘在一起，使其看起来像一个图像，而不是两个单独的图像。

您可以尝试显示：表格属性，在中间绘制一个单元格，以保存第一个图像并调整其大小，以及绝对定位第二个图像：

模态{ 显示：表格； 高度：100vh； 宽度：100vw； 填充底部：73px；/*底部限制*/ 框大小：边框框； } 莫代尔：之前， 模态：之后{ 内容：； 左填充：51px；/*边限制…不能在HLVE中剪切像素*/ 显示：表格单元格； } 莫奇尔德先生{ 显示：表格单元格； 位置：相对位置； 余量底部：100px；/*用于img 2的空间*/ 宽度：1%；/*将展开以适应图像宽度，并将位于中间*/ } img[src*=x212]{ 高度：100vh；/*调整大小*/ 最大高度：calc100vh-100px-73px；/*缩小尺寸以使用*/ 显示：阻止；/*或重置垂直对齐*/ } img[src*=x100]{/*调整大小并拉伸*/ 保证金：0； 位置：绝对位置； 左：0； 右：0； 宽度：100%； 高度：100px； 底部：0； } *{边距：0；} 试试这个

CSS

HTML

你能附上错误的图片吗？是的，很难理解你想在这里实现什么。做一个提琴或代码笔让窗户从左到右变小是它应该做的。但是当向上滑动它时，底部图像保持不变。这是你需要的吗？我可以问你为什么使用位置吗？当我把屏幕换成最小高度的宽窗口时。它会获得一个滚动条，并且图像的大小不会随着底部的73px填充而改变我喜欢它在Y轴上调整大小时的工作方式。但在X轴上，如果调整大小，它会变宽。我需要图像的纵横比保持不变。@Toofle第一个图像保持不变，第二个图像显然不保持不变。另一条线索如果croping图像不是一个麻烦，对象匹配可以做保存比率，但可以从css中选择要切掉的图像边的部分，它现在工作得几乎很好。但当我把它做得高而宽时，它会得到一个水平的滚动条。在这里，它也被认为是可伸缩的。就像我的例子中的灰色块一样。这是可能的吗？@Toofle对于水平滚动条，这也是由于显示：表属性，它展开以适应内容。图像的宽度也可以被控制，但失真会显示最大宽度：calc100vw-102px有办法解决这个问题吗？为了避免保留比率不保留其比率？扭曲的图像正是我所需要的。。我自己也在尝试，但我似乎想不出来。 
*{
  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;
}

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

<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>