html - 根据图像与 div 底部的距离按比例调整顶部边距

Question

我有一个调整图像大小的 javascript 函数，通过 php 在页面上动态生成，以确保它们填充包含它们的 div 的宽度和高度。不幸的是，我无法控制图像的宽高比，有些图像无法拉伸(stretch)以覆盖 div 的高度而不会出现扭曲。

我的解决方案是尝试使用 javascript 添加一个 margin-top css 参数，将图像底部和 div 高度之间的剩余距离指定为该参数的值(例如 maxHeight-图片高度)。但是，使用此方法图像会消失在 div 的边界之外。

我想知道是否有人对此有任何解决方案。是更好的方法，还是让此方法起作用的方法？

Answer 1

如果你想用图像填充你的 div 而没有扭曲，你必须用更接近 div 大小的图像的宽度或高度来填充它。

.imageInDiv{
   width: 100%;
   height: 100%;
   max-width: 100%;
   max-height: 100%;
   }

如果您希望您的图像位于其父 div 的中心:

.parentDiv{
   display:flex;
   display: -webkit-flex;
   justify-content:center;
   -webkit-justify-content:center;
   align-items:center;
   -webkit-align-items:center;
 }